Canvas版国旗代码,Css代码库,德仔网

代码语言

代码分类

【Css】 Canvas版国旗

作者:洛 / 发布于2014/10/10/ 834


	代码

	<canvas id="canvas" width="500" height="300"></canvas>

	

	function draw()
	{
	 var ctx = document.getElementById('canvas').getContext('2d');

	 ctx.fillStyle = '#f00';
	 ctx.fillRect(0,0,450,300);
	 ctx.translate(75,75); // 重新定位坐标原点；translate(x,y)是将默认的坐标原点定位至(x,y)，之后以(x,y)为相对坐标原点
	 ctx.save();

	 ctx.rotate(Math.PI*2/7);
	 drawStar(ctx,40); // 画大五角星，半径为40px
	 ctx.restore();
	 ctx.save();

	 ctx.translate(80, -50);
	 drawStar(ctx, 10); // 画小五角星，半径为10px
	 ctx.restore();
	 ctx.save();

	 ctx.translate(110, -10);
	 drawStar(ctx, 10);
	 ctx.restore();
	 ctx.save();

	 ctx.translate(110, 30);
	 drawStar(ctx, 10);
	 ctx.restore();
	 ctx.save();

	 ctx.translate(80, 70);
	 drawStar(ctx, 10);
	 ctx.restore();
	 ctx.save();
	}
	function drawStar(ctx, r)
	{
	 ctx.save();
	 ctx.beginPath();
	 ctx.moveTo(r,0);
	 for(var i=0; i<9; i++) {
	 ctx.rotate(Math.PI/5); // 按顺时针旋转36&deg;
	 if(i%2 == 0) {
	 ctx.lineTo((r/0.525731) * 0.200811, 0);
	 } else {
	 ctx.lineTo(r, 0);
	 }
	 }
	 ctx.closePath();
	 ctx.fillStyle = '#ff0';
	 ctx.fill();
	 ctx.restore();
	}

试试其它关键字

　Canvas版　　国旗　

同语言下

可能有用的

洛贡献的其它代码(2)