<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Canvas Circle (imooc)</title>
<link rel="stylesheet" href="">
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.lineWidth = 3;
context.strokeStyle = "#005588";
for (var i = 0;i < 10;i++){
context.beginPath();
context.arc(50 + i*100, 60, 40 , 0, 2*Math.PI*(i+1)/10);
context.closePath();
context.stroke();
}
for (var i = 0;i < 10;i++){
context.beginPath();
context.arc(50 + i*100, 60, 40 , 0, 2*Math.PI*(i+1)/10,true);
context.stroke();
}
}
</script>
</head>
<body>
<canvas id="mycanvas" width="1024" height="768" style="border: 1px solid black;display: block;margin:50px auto;">
</canvas>
</body>
</html>
哦哦 我找到原因了，原来是初始圆心的坐标在一起，所以 两排 重叠了
我也遇到这个问题，第二排并没有重新绘制。请问你找到原因了吗
两个for循环不是应该有两行吗，而且我也有beginPath()