為什么我的第二個(gè)for循環(huán) 現(xiàn)實(shí)出來多跟第一個(gè)重復(fù)了
<!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，請(qǐng)你更換瀏覽器重試。
</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>
2016-12-26
你的y軸坐標(biāo)重復(fù)了 ，因?yàn)閏anvar是不會(huì)占用空間的，你三個(gè)循環(huán)都在同一坐標(biāo)ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); ／／哪個(gè)50+i*100是x軸 ，60是y軸，因?yàn)橹貜?fù)所有重疊在一起了
2016-08-25
你第一個(gè)循環(huán)不用改變，第二個(gè)循環(huán)這句話“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àn)槟銀軸距離上邊的高度都是60，所以第二個(gè)覆蓋了第一個(gè)。所以第二個(gè)循環(huán)的60改為200，就不會(huì)重復(fù)了，希望對(duì)你有幫助！