改成这样就不出星星了为什么-慕课网

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

改成这样就不出星星了为什么

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

qq_T_T若是人间四月天_0

2016-03-21 18:54

<html>

<head>

<title>canvas04</title>

window.onload=function(){

var cvs=document.getElementById("canvas");

cvs.width=800;

cvs.height=800;

var context=cvs.getContext("2d");

context.fillStyle="black";

context.fillRect(0,0,cvs.width,cvs.height);

for(var i=0;i<200;i++){

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

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

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

var a=Math.random()*360;

drawShip(context,R,x,y,rot);

}

function drawShip(cxt,R,x,y,rot){

cxt.save();

cxt.translate(x,y);

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

cxt.scale(R,R);

drawStar(cxt);

cxt.fillStyle="#fb3";

cxt.fill();

cxt.restore();

}

function drawStart(cxt){

//cxt为canvas上下文环境变量，R为大圆半径，r为小圆半径，x和y为五角心中心坐标，rot为顺时针旋转的角度

cxt.beginPath();

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

cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R, //把角度转成弧度才能用Math.cos

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

cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*R*0.5,

-Math.sin((54+i*72)/180*Math.PI)*R*0.5);

}

cxt.closePath();

}

</script>

</head>

<body>

</body>

</html>

写回答关注

3回答

慕移动6874463

2016-07-07 17:41:58

我发现你这里的参数传错了

0 0
echoling02

2016-05-19 10:53:58

你的路径绘制里，不要有R参数
function drawStart(cxt){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), //把角度转成弧度才能用Math.cos
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
}

最后是通过缩放scale实现星星大小的变换的不是通过指定半径来的

0 0
战渣一号

2016-03-21 20:22:23

五角星只是描了点并没有用stroke()连起来还有scale（R，R）有点不合理 R取值在10和20之间星星缩放10到20倍实在是。。。。。

0 0