canvas新属性

lineCap默认值是butt,还有aquare,round

使用：context.lineCap="butt"

lineJoin

miter是默认

还可以是round,bevel

此处又会涉及到另一个属性，context.miterLimit

默认miterLimit是10，当超过10时，会以bevel的形式显现，那么什么是miterLimit呢？具体计算是有些复杂的，因为线是有宽度的，而miterllimit 指的是真正的顶端距离有宽度所产生的尖端点之间的距离值

 

下面介绍canvas图形绘制的图形变换

图形变换一般指translate，scale，rotate三种

//context.save();

context.fillStyle=green;

context.fillRect(0,0,200,200);

context.translate(100,100);

//context.restore();

context.fillStyle=red;

context.fillRect(0,0,200,200);

context.translate(200,200);

运行结果发现红色矩形位移了300,300，这时就需要使用context.save();context.restore()来保存和恢复状态

 

当然，canvas还有transform和setTransform属性，可以不使用translate,scale等，就可以达到效果，setTransform为了恢复改变形状之前的状态。

那么transform(1,0,0,1,100,100)和setTransform都有6个参数，这里涉及到了变幻矩阵，而这a,b,c,d,e,f 六个参数分别代表：水平缩放，水平倾斜，垂直倾斜，垂直缩放，水平平移，垂直平移