Canvas学习笔记

<canvas id='canvas'></canvas>

获取canvas对象上下文

var convas=document.getElementById('canvas');

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

canvas是基于状态的绘图环境

画直线

context.moveTo(x,y); 挪到笔头  

context.lineTo(x,y);按着画笔移动 （可以结合使用moveTo画不相连的线段）moveTo lineTo +moveTo lineTo

context.lineWith=10;    canvas是基于状态的，它不会创建一个直线对象。我们是对canvas上下文进行其他设置。读完所以设置后再绘图

context.strokeStyle='red';   这里还有其他的样式，不仅仅只有颜色。

context.stroke();

context.beginPath();  开始一个全新的canvas状态。之前对context的设置不会因为beginPath()而改变。新的设置会覆盖之前的设置

context.closePath();  使用线段绘制封闭的图形。可以去掉最后一个lineTo。closePath()会完成封闭这个动作。

context.fillStyle='green';

context.fill();  建议在进行完所有的设置之后再fill和stroke。不然fill会覆盖一部分的线段宽度，会由10变成5;

可以通过以上方法进行封装各种图形的函数。当然canvas也提供了很多图形api

context.rect(x,y,width,height);绘制矩形的路径

context.fillRect(x,y,width,height);使用当前fillStyle绘制矩形 ( 颜色值可以使用css认同的所有颜色值包括rgb、rgba、hsl、hsla)

context.strokeRect(x,y,width,height);使用当前的strokeStyle绘制矩形

后面绘制的图形如果与之前的图形有重叠，则后者会覆盖前者。

但是如果fillStyle 或者strokeStyle的颜色值有一定的透明度，则被覆盖的部分还是有一部分显示的。当然也有其他对重叠部分的设置

线条属性：

lineWidth=10;

lineCap=''; 线段的2段的样式。butt(default)、round圆头、square方头。round和squqre比默认的长线条宽度的一半（5）的的长度。

lineJoin; 线段与线段之间连接的样式。miter(default)、bevel(斜截)、round(圆头)  

图形变换

context.translate(x,y);移动坐标系

context.rotate(deg);旋转坐标系弧度制

context.scale(x,y);缩放坐标系--->需要注意的是，它也会对坐标数值，边框宽度属性等进行缩放，使用时需要谨慎选择。

提示：在进行一次变换之后，坐标系已经发生变化，如果在使用变换，就会与之前预期不同。那么我们就需要将之前的变换再逆向执行一次，如context.translate(100,200)之后，如果还需要进行rotate变换，就需要再进行一次context.translate(-100,-200)操作。这样操作就会很麻烦，canvas提供了一个简单的方法来保存变换之前的canvas状态。如下

context.save();

context.translate(x,y);

context.restore();