HTML5之Canvas基础
<script type="text/javascript">var canvasDom=document.getElementById("demoCanvas");//获取canvas元素var context=canvasDom.getContext("2d");//获取canvas的context对象,一切操作都是在context对象上完成的 // // //绘制不填充矩形 // context.strokeStyle="red"; //设置线条的颜色样式 // context.strokeRect(10,10,190,100);//绘制并指定位置 // //绘制填充矩形 // context.fillStyle="blue"; // context.fillRect(110,110,100,100) // // //绘制线条 // context.beginPath(); //开始路径绘制 // context.moveTo(20,20);//设置起点 // context.lineTo(200,200);//从起点绘制一条到(200,20)的直线 // context.lineTo(400,20); // context.closePath();//绘制一条到从最后一点到起点的直线 // context.lineWidth=2.0;//设置线条宽度 // context.strokeStyle="#CC0000";//设置线条颜色 // context.stroke();//开始绘制,只有调用这个方法后才可见 //// context.moveTo(100,100); // //绘制文字 // context.font="Bold 50px Arial"; //设定字体 // context.textAlign="left";//对齐方式 // context.fillStyle="#005600";//填充颜色 // context.fillText("Hello world",100,50);//填充文字和位置 // //绘制空心字 // context.strokeText("你好",10,100) // //绘制圆形和椭圆 arc方法x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度 // //用弧度表示。 anticlockwise表示做图时顺时针还是逆时针 // context.arc(60,60,50,0,Math.PI*2,true); // context.lineWidth=2.0; // context.strokeStyle="#000"; // context.stroke();//绘制图片var image=new Image();image.src="black.jpg";image.onload=function(){for(var i=0;i<10;i++){context.drawImage(image,100+i*80,100+i*80)}}</script>
转载于:https://www.cnblogs.com/codingForHer/p/8541213.html
HTML5之Canvas基础相关推荐
- HTML5:canvas基础
HTML特性(canvas)01 canvas是一个可以用脚本(JavaScript)再其中绘制图形的html元素,是html5中新曾元素. 注意:canvas不支持再IE9一下的浏览器执行 初步使用 ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- HTML5 新特征之Canvas基础
canvas标签 了解canvas标签 绘制直线 绘制矩形 绘制圆弧 绘制文字 绘制渐变色 线性渐变 放射渐变 绘制阴影 了解canvas标签 HTML5的canvas标签提供了一套强大的图形API, ...
- 使用HTML5的canvas做一个会动的时钟
这次我们的目标是画一个会和时间同步的时钟,不过没有美学感觉,样子丑的厉害. HTML5支持canvas了,我们可以直接在页面上绘图了,我看了下canvas和GDI+的接口差不多,所以我们先了解些基本的 ...
- canvas基础-绘制矩形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
- html5中提供的绘图元素,HTML5中Canvas元素的使用总结
HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- H5 canvas基础入门到捕鱼达人小游戏实现(1)
为什么学习canvas? 看见别人网页一些非常炫酷的效果,羡慕不已,于是对canvas产生了浓厚的兴趣,所以想仔细学习学习canvas.下面就一起来学习吧,本文为系列文章,最后会编写一个简单版的捕鱼达 ...
最新文章
- Beta冲刺 (1/7)
- android jack log,Android:JACK编译错误汇总及解决
- PHP 字符串与数组间的相互转化
- 计算机组成原理存储结构,计算机组成原理与体系结构----存储系统
- JavaSE中Map框架学习笔记
- asp.net web常用控件FileUpload(文件上传控件)
- GPU Shader 程序调试方法
- nginx html 不缓存,nginx如何实现js和css不缓存
- Java基础巩固——排序
- 图像仿射变换python实现
- Python类方法,静态方法
- 神兽传说JAVA下载_神兽传说3-救赎大陆
- openSUSE-Leap-15.4-DVD-x86_64的日常使用设置
- 网传固态硬盘因为TRIM指令一经删除无法恢复是以讹传讹
- Ubuntu 使用XCB
- 戴尔▪卡耐基《人性的弱点》阅读笔记(1)
- 【功能代码设计】3D坦克大战
- 粒子系统-烟花效果的实现
- 神舟十二号出征星辰大海--麒麟信安操作系统筑牢“千年飞天梦”软件基石
- HTTP协议之vary
热门文章
- python自带的集成开发环境是什么-常用的几款Python集成开发环境或者编辑器详解...
- python学习官网-Python学习(一)—— 初识python
- idea python-IDEA里如何安装Python插件打造开发环境(图文详解)
- python画折线图代码-python编程:如何使用python代码绘制折线图?
- 零基础学python爬虫-我是如何零基础开始能写Python爬虫的
- python手机版怎么用-你知道如何用手机编程Python吗?
- python怎么用拼音-又一个奇葩要求,Python是如何将“中文”转“拼音”的?
- python就业方向哪个好-学习python就业方向都有哪些?
- python官网的软件好用吗-为何强烈不推荐去学python?
- python好学吗 老程序员-今天面试了一个34岁大龄程序员,有感而发