canvas使用

基本步骤类似于

步骤1准备画布

准备画布 标签就是画布 canvas画布有默认⼤⼩ 默认350X150设置canvas画布⼤⼩

通常canvas是⼀个标签，可以在style canvas{width:xxxpx; height:xxpx} 但是不建议这样写 不建议在样式设置尺⼨我们可以在元素本⾝来设置

解释：不在样式表中设置canvas画布⼤⼩的原因在css中设置canvas尺⼨

canvas{

border:1px solid black; width: 600px; height: 400px; }

同样类似下⾯在(100,100)的位置绘制⼀条直线

此时可以发现 原来300X150的框拉伸到600X400，同样原来100X100的点距离左边和上边同⽐例放⼤了。就好⽐于拉伸了图⽚，点的相对⽐例没变，⽽实际位置改变。

所以在css样式中我们设置canvas的样式，⽽不是canvas的⼤⼩

步骤2准备绘制⼯具，利⽤⼯具绘图

温馨提⽰：现在canvas getContext('2d'); 只能绘制平⾯图，需要绘制3d图需要使⽤另外技术 web gl;

绘制出来的线模糊原因 canva的线默认1px ⿊⾊，对齐的点是线中⼼的位置，⽽1px不是分布在整个1px，⽽是相邻两个1px像素各有0.5px的线条，显⽰不饱和，由于浏览器⽆法解析最⼩0.5px，所以模糊。

解决⽅法可以加0.5px 例如ctx.moveTo(100,100.5)，实际中可以不处理，因为模糊效果不是很明显，更多的是⽤canvas绘制图⽚

例⼦：绘制不同样式的线条使⽤ctx.begainPath()开启新路径

要绘制不同样式（颜⾊，宽度等）线条，可以使⽤ctx.begainPath() 开启新路径

例⼦：绘制填充颜⾊三⾓形

绘制三条线，围成三⾓形，使⽤fil填充 填充默认的颜⾊也是⿊⾊注意：缺⾓问题，原因起始点和lineTo的结束点⽆法完全闭合缺⾓

/*解决⽅法使⽤canvas的⾃动闭合 */ /*关闭路径*/ ctx.closePath();

例⼦：镂空图形

⾮零填充规则1.看⼀块区域是否填充2.从这个区域拉⼀条线3.看和这条线相交的轨迹4.如果都是顺时针+15.如果逆时针-1

6.所有的轨迹值计算出来7.如果是⾮0那么填充8.如果是0则不填充

例⼦：绘制折线图

例⼦：绘制渐变矩形

例⼦：绘制饼状图

例⼦：绘制图⽚

例⼦：绘制帧动画图⽚

例⼦：绘制⾏⾛的⼈