Html5——Canvas标签学习笔记

一、定义一个带边框、规定大小的canvas

<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>

• 不建议使用CSS方法来定义canvas的大小，因为使用CSS方法指定的大小是画布显示区的大小；使用定义width属性的话，是将canvas内图片的分辨率一同定义了。
• width和height没有指定单位，因为上述定义方法一同将画布内元素的精度一同定义了，所以不加上单位才是符合W3C的要求。

二、浏览器兼容性

<canvas id="canvas">浏览器版本过老，请更换浏览器之后再试</canvas>

或者

<pre name="code" class="javascript">if(canvas.getContext('2d')){//canvas.getContext('2d')返回值为空，则表示浏览器不支持canvas标签
}else{
alert("浏览器不支持canvas");
}

三、对canvas进行编辑

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d')

canvas本身不具有绘图功能，所以绘图需要在JS中实现；

上述方法通过Id获取canvas标签，并通过使用getContext('2d')来创建一个context对象，这个context对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

后续的所有操作都是在context对象中进行操作，2d表示所绘图像为2D。

此时也可以在JS中通过canvas.width来指定画布大小。

四、创建简单图形

坐标是以画布的左上角为原点，向右为X轴正方向，向左为Y轴正方向

线条

context.moveTo(100,100);//把路径移动到画布中的指定点，不创建线条
context.lineTo(700,700);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
<pre name="code" class="javascript">context.lineWidth = 10;//定义线条宽度

context.strokeStyle = "#0000ff";//定义线条样式，可以采用CSS方式

context.stroke();//绘制已定义的路线

多边形

context.moveTo(100,100);
context.lineTo(100,700);
context.lineTo(700,400);
context.lineTo(400,100);
context.lineTo(100,100);

给多边形填充颜色

context.fillStyle = "rgb(2,100,30)";//设置或返回用于填充绘画的颜色、渐变或模式
context.fill();//填充当前绘图（路径）

当需要创建两个或多个图形时

在每一个图形的状态前后加上context.beginPath()和context.closePath()；

当所绘图形不是封闭的，closePath()函数会自动补充线段将图形封闭起来。

若不想要将图形封闭起来，直接将closePath()去掉即可，两者不一定需要同时出现。

圆形

context.arc(300,300,200,0,1.5*Math.PI);

语法为：arc(centerX,centerY,radio,starAngle,endAngle, counterclockwise);

分别为圆心X坐标，圆心Y坐标，半径，起始弧度，结束弧度，方向（顺时针true或逆时针false）;

无论旋转方向如何，0弧度为3点钟方向，0.5PI为6点钟方向，以此类推；