【Html5每日练习】canvas五彩缤纷的五角星_html5在页面中画一个五角星,参考五点坐标(100,10),(40,180),(190,60),(-优快云博客

本文链接：https://blog.youkuaiyun.com/boiaprogramfan0420/article/details/7460777

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

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

<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>

效果图如下