為什么我的星星沒有填充色呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#canvas{display: block; border: 1px solid black; margin: 60px auto;}
</style>
<body>
<canvas id="canvas">
</canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
context.fillRect(0,0,canvas.width,canvas.height)
//一個畫布中開始子路徑的一個新的集合
drawStar(context,150,300,400,400,30);
}
//cxt:繪制環(huán)境 ? r：小圓半徑 ? R：大圓半徑 ? x，y：圖像的位置 ? rot:旋轉(zhuǎn)的角度
function drawStar(cxt,r,R,x,y,rot){
cxt.beginPath();
for (var 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)
}
? ? ? ? ? ? //一個畫布中結(jié)束子路徑的一個新的集合
? cxt.closePath();
?
? ? ?cxt.fillStyle = "#fb3";
? ? ?cxt.strokeStyle = "#fd5";
? cxt.lineWidth = 3;
? cxt.lineJoin = 'round';
?
?
? //畫弧
? cxt.stroke();
}
</script>
</body>
</html>
2016-08-26
?//畫弧
? cxt.stroke();
在這之前添加cxt.fill();
2016-08-25
因為你沒有寫 cxt.fill()?