lisp 绘制立体感的五角星_canvas之五角星的绘制

绘制简单图形线及矩形

canvas{

border: 1px solid #aaa;

display: block;

margin: 50px auto;

}

var c = document.querySelector("#canvas");

c.width = 800;

c.height = 800;

//画布

var context = c.getContext("2d");

//五角星的绘制

function drawstar(cxt,r,R,x,y,rot)

{

context.beginPath();

for( var i = 0; i <5 ;i++)

{

cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,

-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);

cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,

-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

}

cxt.closePath();

cxt.fillStyle="pink";

cxt.lineWidth = 3;

cxt.fill();

cxt.stroke();

}

drawstar(context,130,200,400,400,60);