今天来画个星星图 是木渴望上的教程
var c=document.getElementById("Mycanvas");
var context=c.getContext("2d");
context.fillStyle="black"; //背景色
context.fillRect(0,0,800,800);
for (var i = 0; i <= 30; i++) {
var r=Math.random()*10+10;
var x=Math.random()*800;
var y=Math.random()*800;
var a=Math.random()*360;
drawStar(context,x,y,r,r/2.0,a);
}
function drawStar(ctx,x,y,outerR,innerR,rot){
ctx.beginPath();
for(var i=0;i<5;i++){ //三角函数算法
ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x,
-Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y);
ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
-Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
}
ctx.closePath();
ctx.stroke();
ctx.fillStyle="#fb3"; //填充颜色
ctx.strokeStyle="#fd5"; //border颜色
ctx.lineWidth=3; //线宽
ctx.lineJoin="round"; //圆角
ctx.fill(); //填充当前图像
ctx.stroke(); //绘制
}