为什么代码一样，效果完全不一样呢？
来源：4-1 画一片星空
qq_烟火里的尘埃_0
2016-01-06 15:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 1000;
canvas.height = 700;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0 ,0 ,canvas.width,canvas.height);
for(var i = 0 ; i < 200 ;i++){
var r = Math.random() * 10 + 10;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var a = Math.random() * 360;
drawStar(context, x, y, r, r/2.0, a);
}
function drawStar(cxt, x, y, outerR, innerR, rot){
for (var i = 0; i < 5; i++){
cxt.lineTo ( Math.cos( (18+i*72-rot) / 180*Math.PI ) * outerR + x,
-Math.sin( (18+i*72-rot)/ 180*Math.PI) * outerR + y);
cxt.lineTo(Math.cos( (54+i*72-rot) / 180*Math.PI) * innerR + x,
-Math.sin( (54+i*72-rot) / 180*Math.PI) * innerR + y);
}
cxt.closePath();
cxt.lineWidth = 3;
cxt.fillStyle = "#fb3";
cxt.strokeStyle = "#fd5";
cxt.fill();
cxt.stroke();
}
}
</script>
</head>
<body>
<canvas id="canvas" style="margin: 50px auto ;display: block; border:1px solid black;"></canvas>
</body>
</html>
写回答
关注
4回答
-
- 野猫1
- 2016-01-11 13:51:08
我运行了一次，发现你的效果也很酷啊。。。，其实是因为你的drawStar()的函数少写了一行“cxt.beginPath()”。（另外你的drawStar()函数应该放在window.onload外面。）
-
- blablabla
- 2016-08-18 14:56:49
你是故意的。艺术家
-
- hj000000
- 2016-04-10 16:24:41
加一个“cxt.beginPath()”就没问题了
-
- Charless
- 2016-01-06 17:13:50
差哪儿了？
Canvas绘图详解
Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图
72881 学习 · 422 问题
相似问题