改成這樣就不出星星了 為什么
<html>
<head>
<title>canvas04</title>
<script>
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上下文環(huán)境變量，R為大圓半徑，r為小圓半徑，x和y為五角心中心坐標(biāo)，rot為順時(shí)針旋轉(zhuǎn)的角度
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*R, //把角度轉(zhuǎn)成弧度才能用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>
<canvas id="canvas" ?style="border:5px solid #ccc;margin:50px auto;display:block"></canvas>
</body>
</html>
2016-07-07
?
我發(fā)現(xiàn)你這里的參數(shù)傳錯(cuò)了
2016-05-19
你的路徑繪制里，不要有R參數(shù)
function drawStart(cxt){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI), //把角度轉(zhuǎn)成弧度才能用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();
}
最后是通過(guò)縮放scale實(shí)現(xiàn)星星大小的變換的 不是通過(guò)指定半徑來(lái)的
2016-03-21
五角星只是描了點(diǎn) 并沒(méi)有用stroke()連起來(lái) ? ? ?還有scale（R，R）有點(diǎn)不合理 ?R取值在10和20之間 ?星星縮放10到20倍 實(shí)在是。。。。。