改成這樣就不出星星了 為什么
<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上下文環境變量，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>
<canvas id="canvas" ?style="border:5px solid #ccc;margin:50px auto;display:block"></canvas>
</body>
</html>
2016-07-07
?
我發現你這里的參數傳錯了
2016-05-19
你的路徑繪制里，不要有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實現星星大小的變換的 不是通過指定半徑來的
2016-03-21
五角星只是描了點 并沒有用stroke()連起來 ? ? ?還有scale（R，R）有點不合理 ?R取值在10和20之間 ?星星縮放10到20倍 實在是。。。。。