                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

为什么我的第二个for循环现实出来多跟第一个重复了

<!DOCTYPE html>

<html>

<head>

</head>

<body>

你的浏览器不支持canvas，请你更换浏览器重试。

</canvas>

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>

08:13

夏·洛克

2016-08-25

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-3

关注问题我要回答

1713

操作

收起

2 回答

水瓶君
2016-12-26

你的y轴坐标重复了，因为canvar是不会占用空间的，你三个循环都在同一坐标ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); ／／哪个50+i*100是x轴，60是y轴，因为重复所有重叠在一起了

0 回复有任何疑惑可以回复我~

收起回答

回忆没了焦点
2016-08-25

你第一个循环不用改变，第二个循环这句话“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，就不会重复了，希望对你有帮助！