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

来源：互联网发布：mac xlsx 编辑：程序博客网时间：2024/04/29 02:34

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

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

<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之间的数 所以乘以256context.fillStyle = toRGB(parseInt(Math.random()*256),parseInt(Math.random()*256),parseInt(Math.random()*256));context.fill();}</script></html>

效果图如下