貌似是很久没碰数学的缘故,今天计算如何绘制一个五角星特别地费力,看来还得好好地学下高数啊,太虚假了~~~
不过计算出来后还是有一点小小的错误,有两条边有点误差,大家就凑合看吧,不要见怪
<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>
效果图如下