【Html5每日练习】canvas五彩缤纷的五角星

貌似是很久没碰数学的缘故,今天计算如何绘制一个五角星特别地费力,看来还得好好地学下高数啊,太虚假了~~~大笑

不过计算出来后还是有一点小小的错误,有两条边有点误差,大家就凑合看吧,不要见怪

<html lang="en-US">
<canvas id=myCanvas width=500px height=500px></canvas>

<script>
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");

	//创建五角星
	var shape = {};
	shape.star = function(l)
	{
		var rad1 = Math.sin(0.4*Math.PI);     //sin(72)
		var rad2 = Math.cos(0.4*Math.PI);	  //cos(72)
		var rad3 = Math.sin(0.2*Math.PI);	  //sin(36)
		var rad4 = Math.cos(0.2*Math.PI);	  //cos(36)

		with(context)
		{
			moveTo(0,-l*rad1);
			lineTo(l*rad2,0);
			lineTo(l+l*rad2,0);
			lineTo(l*rad2+2*l*rad2*rad2,l*rad3);
			lineTo(l*rad4,2*l*rad1*rad1-l*rad1+l*rad3);
			lineTo(0,2*l*rad1*rad1-l*rad1);
			lineTo(-l*rad4,2*l*rad1*rad1-l*rad1+l*rad3);
			lineTo(-l*rad2-2*l*rad2*rad2,l*rad3);
			lineTo(-l-l*rad2,0);
			lineTo(-l*rad2,0);
			lineTo(0,-l*rad1);
		}
	}
	
    function addZero(string){return string.length == 2 ? string : '0' + string;}
                
    //随机颜色
    function toRGB(redValue, greenValue, blueValue)
    {
		rgbR = addZero(redValue.toString(16)),
		rgbG = addZero(greenValue.toString(16)),
		rgbB = addZero(blueValue.toString(16));
		var rgb = "#" + rgbR + rgbG + rgbB;
		return rgb;
    }
	context.translate(250,100);

	for(var i=0;i<50;i++) 
	{
		context.beginPath();
		context.scale(0.95,0.95);  
        context.rotate(Math.PI/8);  
        context.translate(70,-25);
		shape.star(50);
		//Math.random()返回的是0~~~1之间的数 所以乘以256
		context.fillStyle = toRGB(parseInt(Math.random()*256),
							parseInt(Math.random()*256),parseInt(Math.random()*256));
		context.fill();
	}
</script>
</html>


效果图如下


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值