lineCap(线的帽子)
线的端点表现,是平角还是圆端点
- lineCap="butt"(默认值)
- lineCap="round"(圆角,以线宽为直径的半圆)
- lineCap="square"(比butt长一点的平角,以线宽为长,以线宽一半为宽的矩形)
window.onload=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.lineWidth=10;
context.strokeStyle="#0FC86A";
context.beginPath();
context.moveTo(10,10);
context.lineTo(200,10);
context.lineCap="butt"//默认值。线的两端是平角的没有弧度
//context.closePath();//记得不要加这个才有效果哦
context.stroke();
context.beginPath();
context.moveTo(10,30);
context.lineTo(200,30);
context.lineCap="round";//圆弧
//context.closePath();//记得不要加这个才有效果哦
context.stroke();
context.beginPath();
context.moveTo(10,50);
context.lineTo(200,50);
context.lineCap="square";//方形
//context.closePath();//记得不要加这个才有效果哦
context.stroke();
}
lineCap只是在线条的两端才起作用。哪怕是折点很多的折线也只能在线条两端加上帽子
linejoin:两条线的拐角
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=600;
var context=canvas.getContext('2d');
context.strokeStyle="#0FC86A"
context.lineWidth=10;
//context.lineJoin="miter"//默认的斜切
//context.lineJoin="bevel"//连接处是一个平角
context.lineJoin="round"//连接处是是一个平缓的圆角
context.beginPath();
context.moveTo(10,10);
context.lineTo(150,150);
context.lineTo(10,290);
context.stroke();
当然linejoin为miter时也有一个额外的属性,miterLimit,但是比较少用。