canvas学习笔记

1.<canvas id="canvas" width="1024" height="768" ></canvas>

注意：设置canvas宽高，一般不用css写法，直接以属性（width,height）方式写[ 一同设置canvas内部的显示分辨率大小 ]，并且不带单位，如上代码所示。

2.canvas进行绘制，在javascript进行初始化。

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d"); //调用canvas的getContext方法，得到绘图环境

JS中指定canvas大小： canvas.width ( width方法 ) / canvas.height( height方法 )

3.浏览器不兼容提示

<canvas>不兼容提示信息，如建议更换浏览器</canvas> //当用户浏览器支持canvas的时候，标签内的内容不会显示

4.canvas绘制

context.moveTo(100,100); //设置起点 context.lineTo(200,200); //设置终点

上述为状态设置，最后还需要绘制。调用stroke（笔画）函数（用于绘制线条）

context.stroke();

5.canvas绘制状态

contenxt.lineWidth = num; //设置线条宽度 context.strokeStyle = "rgb"; //线条颜色，可以用CSS的颜色赋值方式，注意赋值放在字符串中

6.填充色 fill()

context.fillStyle = "rgb"; //设置颜色值 context.fill();调用颜色方法（也会进行收尾相连再填充）

7.多路径分段绘制

context.beginPath();//开启新路径 context.closePath();//结束当前路径，注意，closePath会把不封闭的图形自动收尾相接

beginPath和closePath不一定要成对使用

8.画弧线

context.arc(x,y,r,sAngle,eAngle,counterclockwise); //参数可参考文档

9.清空矩形区域画布

context.clearReact(); //参数参照文档