canvas API ，通俗的canvas基础知识（二）(2)_H5之家

怎么用？哥给一个跟金箍棒：

金箍棒，大，大，大，大，在大点，哈哈哈~~~

咳咳，严肃点，有此神器，我们就可以修改任何线框，线条的线条宽度了，比如说空心三角形，空心矩形，当然，空心文字你就不要问我了，我不知道~

关于线条，还有另外2个属性：

lineJoin 两线交叉的拐角类型

参数：

miter ：尖角默认

bevel ：斜角

round ：圆角

什么意思，那就用空心矩形为例：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.strokeRect(100,10,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin = 'round';
ctx.strokeRect(100,110,80,80);
ctx.closePath();
ctx.beginPath();
ctx.lineJoin = 'bevel';
ctx.strokeRect(100,210,80,80);
ctx.closePath();

右侧为折线效果

配合折线效果，还有一个属性：

miterLimit规定最大斜接长度。什么意思？看看右边的这个折线图，最下面那组的尖尖角，这个就是斜接，意思通俗意思就是规定那个尖尖角的长度，如果尖尖角的长度小于miterLimit 的值，则正常显示，如果大于的话，就会被截掉一部分，其形状就跟lineJoin='bevel'一样一样的，且此方法只对lineJoin="miter" 默认值的时候才起作用，给个形象的例子吧：

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth=10; ctx.lineJoin="miter"; ctx.beginPath(); ctx.miterLimit=19; ctx.moveTo(20,20); ctx.lineTo(150,27); ctx.lineTo(20,34); ctx.stroke(); ctx.beginPath(); ctx.miterLimit=18; ctx.moveTo(20,120); ctx.lineTo(150,127); ctx.lineTo(20,134); ctx.stroke();

ctx.beginPath();
ctx.lineJoin="bevel";
ctx.moveTo(20,220);
ctx.lineTo(150,227);
ctx.lineTo(20,234);
ctx.stroke();

如图，当miterLimit 的值大于等于19时，尖尖角正常显示，小于18时，尖尖角被截断了，效果跟设置lineJoin='bevel'是一样的，暂不知道会有什么作用，待以后来发掘！

另一个：

lineCap 设置或返回线条的结束端点样式注意，这是设置线条的哦！

参数：

butt默认。向线条的每个末端添加平直的边缘。

round 向线条的每个末端添加圆形线帽。

square向线条的每个末端添加正方形线帽。

什么意思？线条嘛，我们还是以金箍棒为例，算了，还是用线条吧（看到金箍棒我就想笑了）；

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 10; ctx.beginPath(); ctx.lineCap = 'butt'; ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'round'; ctx.moveTo(50,100); ctx.lineTo(200,100); ctx.stroke(); ctx.beginPath(); ctx.lineCap = 'square'; ctx.moveTo(50,150); ctx.lineTo(200,150); ctx.stroke();

可以看到，后面2个比第一个要长一点，具体长多少呢？画一个图示意一下：

圆角和方脚的原理其实是这样的，很明显多出的一部分的宽度就是线条的一半的长度，所以要精确计算其长度，此小细节需谨记！

现在我们来讲讲画圆及其相关的图形：

arc(x,y,r,sAngle,eAngle,counterclockwise)

什么意思？ x,y表示坐标点表示圆心坐标，r表示半径，sAngle表示开始弧度，eAngle表示结束弧度，counterclockwise表示顺时针还是逆时针方式，默认为顺时针false，逆时针为true