为了账号安全,请及时绑定邮箱和手机立即绑定

各位大神,谁可以帮帮小妹看看这段代码哪出错了,十分感谢!

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


正在回答

8 回答

 starPath(cxt);

cxt.translate(x,y);

cxt.rotate(rot/180*Math.PI);

应该是先图形变换,再开始画星星:

cxt.translate(x,y);

cxt.rotate(rot/180*Math.PI);

starPath(cxt);

3 回复 有任何疑惑可以回复我~
#1

仰望星空望 提问者

非常感谢!
2015-10-29 回复 有任何疑惑可以回复我~

lublank解释的应该是对的

0 回复 有任何疑惑可以回复我~

这好坑啊  你把canvas 的绝对定位去掉 再试试~!!!

0 回复 有任何疑惑可以回复我~

这是js?把问题标签弄到js那边吧,那样多点人知道滴

0 回复 有任何疑惑可以回复我~

额,没用过canvas,赶快去学习下- -!

0 回复 有任何疑惑可以回复我~

根本看不懂

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

各位大神,谁可以帮帮小妹看看这段代码哪出错了,十分感谢!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信