为什么我的第二个for循环 现实出来多跟第一个重复了
夏·洛克
2016-08-25 17:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Arc</title>
</head>
<body>
<canvas id="cvs" style="border: 1px solid #aaa;display: block;margin: 10px auto">
你的浏览器不支持canvas，请你更换浏览器重试。
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("cvs");
canvas.width = 1200;
canvas.height = 600;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
ctx.strokeStyle = "#f62";
// ctx.arc(300,300,200,.5*Math.PI,1.2*Math.PI);
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
ctx.closePath();
ctx.stroke();
}
// ctx.fillStyle = "#9fe";
// for(var j=0;j<10;j++){
// ctx.beginPath();
// ctx.arc(50+j*100,60,40,0,2*Math.PI*(j+1)/10);
// ctx.fill();
// }
ctx.lineWidth = 5;
ctx.strokeStyle = "#df2";
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
ctx.closePath();
ctx.stroke();
}
}
</script>
</body>
</html>
2回答
-
- 水瓶君
- 2016-12-26 18:15:57
你的y轴坐标重复了 ，因为canvar是不会占用空间的，你三个循环都在同一坐标ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); ／／哪个50+i*100是x轴 ，60是y轴，因为重复所有重叠在一起了
-
- 回忆没了焦点
- 2016-08-25 19:01:38
你第一个循环不用改变，第二个循环这句话“ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);”改为“ctx.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10);”因为你y轴距离上边的高度都是60，所以第二个覆盖了第一个。所以第二个循环的60改为200，就不会重复了，希望对你有帮助！
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题