各位大神，谁可以帮帮小妹看看这段代码哪出错了，十分感谢！-慕课网

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

来源：4-3 应用translate、rotate和scale

仰望星空望

2015-06-02 16:40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>[有问题？？？]改写后的绘制200个随机的五角星</title>

</head>

<body>

<canvas id="canvas" style="margin:auto;top:0;left:0;bottom:0;right:0;position:absolute;">当前浏览器不支持，请更换浏览器</canvas>

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>

写回答关注

6回答

lublank

2015-08-21 09:29:55

已采纳

starPath(cxt);
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
应该是先图形变换，再开始画星星：
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
starPath(cxt);

1 3

仰望星空望

非常感谢！

2015-10-29 15:23:07

共 1 条回复 >
小王子抓猫咪

2015-08-31 12:56:39

lublank解释的应该是对的

0 0
balance_gem

2015-06-23 14:57:03

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

0 0
六月时光

2015-06-05 10:04:30

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

0 0
笑与君歌

2015-06-02 16:56:55

额，没用过canvas，赶快去学习下- -！

0 0
丶花落忆流年

2015-06-02 16:42:04

根本看不懂

0 0