从零开始的canvas2

今天来画个星星图  是木渴望上的教程

	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();	//绘制
	}

猜你喜欢

转载自blog.csdn.net/qq_38674970/article/details/82749952