为什么明明设置了绘制10棵星星，运行之后，出现满画布的星星-慕课网

首页课程实战体系课手记专栏慕课教程

为什么明明设置了绘制10棵星星，运行之后，出现满画布的星星

来源：4-2 图像变换和状态保存

新一代英雄

2015-08-04 16:01

<!doctype html>

<html>

<head>

<title>无标题文档</title>

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);

for(i=0;i<10;i++)

{

var r=Math.random()*10+10;

var x=Math.random()*canvas.width;

var y=Math.random()*canvas.height;

var a=Math.random()*360;

draw(context,r,r/2,x,y,a);

}

//rot 旋转角度

function draw(cxt,R,r,x,y,rot){

context.beginPath();

for(i=0;i<5;i++)

{

cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,

-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);

cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,

-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);

}

cxt.closePath();

cxt.lineWidth=3;

cxt.strokeStyle="#fd5";

cxt.lineJoin="round";

cxt.fillStyle="#fb3";

cxt.fill();

cxt.stroke();

}}

</script>

</head>

<body>

</canvas>

</body>

</html>

写回答关注

4回答

cesiya23

2015-11-05 20:24:02

其他的问题，同一楼的，局部使用i时，请用var

0 0
cesiya23

2015-11-05 20:14:10

draw函数里的context.beginPath(); 应该是cxt.beginPath();

0 0
cesiya23

2015-11-05 20:07:28

为何你把draw函数定义在onload内部？移出去试试？

0 0
百科船熟

2015-09-18 14:53:37

for(i=0;i<5;i++) --------------->for(var i=0;i<5;i++) 或者--------->var i=0;for(i=0;i<5;i++)

0 0

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题

星星的动画

回答 1

为什么不出星星

回答 1

为什么没有星星

回答 2

星星出不来？

回答 1

求助：为什么我优化代码后画出来的不是星星？

回答 2

打开慕课网App查看更多内容