canvas线条的属性详解

//角度转弧度：除以180*PI
for(var i=0;i<5;i++){
context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
-Math.sin((18+i*72)/180*Math.PI)*300+400);
context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
-Math.sin((54+i*72)/180*Math.PI)*150+400);
}

context.closePath();

context.lineWidth=10;
context.stroke();

封装成函数：

window.onload=function(){
var canvas=document.getElementById("canvas");
 canvas.width=800;
canvas.height=800;
 var context=canvas.getContext("2d");
context.lineWidth=10;
drawStar(context,150,300,400,400)
} 
function drawStar(ctx,r,R,x,y,){
ctx.beginPath();
//角度转弧度：除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
-Math.sin((18+i*72)/180*Math.PI)*R+y);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
-Math.sin((54+i*72)/180*Math.PI)*r+y);
}
 ctx.closePath();
ctx.stroke();
}

分别修改小r=80,200，400得到下面图形

 

 

增加一个顺时针旋转的参数：rot

window.onload=function(){
var canvas=document.getElementById("canvas");
 canvas.width=800;
canvas.height=800;
 var context=canvas.getContext("2d");
context.lineWidth=10;
drawStar(context,150,300,400,400,30);
} 
//rot顺时针旋转的角度
function drawStar(ctx,r,R,x,y,rot){
ctx.beginPath();
//角度转弧度：除以180*PI
for(var i=0;i<5;i++){
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
}
 ctx.closePath();
ctx.stroke();
}

旋转30度的效果如下：

三、线条的连接lineJoin和miterLimit

1、lineJoin取值

miter(default)永远呈现一个尖角,bevel斜接,round圆角

bevel像彩带折下来的效果。