各位大神,谁可以帮帮小妹看看这段代码哪出错了,十分感谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[有问题???]改写后的绘制200个随机的五角星</title>
</head>
<body>
<canvas id="canvas" style="margin:auto;top:0;left:0;bottom:0;right:0;position:absolute;">当前浏览器不支持,请更换浏览器</canvas>
<script>
window.onload=function()
{
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
canvas.width=800;
canvas.height=800;
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height);
//绘制200个星星
for(var i=0;i<200;i++)
{
var r=Math.random()*10+10;//产生一个5-15之间的随机数,Math.random是产生一个0-1之间的数
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;//产生一个随机的角度
drawStar(context,x,y,a);//进行五角星函数的调用400、400控制星星的位移,R,r控制星星的大小
}
}
//自定义一个绘制五角星的函数,使用时直接调用(使得绘制五角星函数化)
function drawStar(cxt,x,y,rot)
{
cxt.save();
starPath(cxt);
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.lineWidth=1;
cxt.strokeStyle="blue";
cxt.fillStyle="white";
cxt.lineJoin="round";
cxt.fill();
cxt.stroke();
cxt.restore();
}
//绘制标准五角星
function starPath(cxt)
{
cxt.beginPath();
//通过对五角星的十个顶点的分析,得出以下(300为大圆半径,150为小圆半径)
for(var i=0;i<5;i++)
{
//最开始为18度,180是JS中是弧度制,400表示使五角星在中间,-rot表示顺时针转30度,绘制五角星时是逆时针绘制的,所以顺时针转的话减相应角度,lineTo的纵坐标是负的,因为JS中Y轴是向下的。
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*20,
-Math.sin((18+i*72)/180*Math.PI)*20);
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,
-Math.sin((54+i*72)/180*Math.PI)*0.5*20);
}
cxt.closePath();
}
</script>
</body>
</html>