4、线条的属性

语雀

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，但是比较少用。