为什么我的HTML5画布绘图会以这种方式表现？

Question

我正在学习使用HTML5画布，我决定为圆形绘制设置动画：

http://codepen.io/anon/pen/KdpyVm

通过从一个点绘制，然后完成圆圈，它正确启动。但显然有一些我不理解的有趣的事情。

1. 为什么弧线在绘制时最初显示为粗体，然后线条变得更薄3/4？是以某种方式重绘自己吗？
2. 当弧endAngle达到2PI时，为什么不重新开始？

Answer 1

您没有清除整个画布（仅左上角部分），因此线条中的额外粗细是从画布中重绘圆圈时未被清除的部分发生的：

ctx.clearRect(0,0,600,600);

<强> http://codepen.io/anon/pen/wKaPgz

Answer 2

正如Spencer Wieczorek所说，你并没有清理整个画布。

你应该使用画布＆＃39;自己的宽度和高度来清除画布。

变化：

var ctx = document.getElementById('canvas').getContext('2d');

要：

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

然后像这样使用宽度和高度......

ctx.clearRect(0, 0, canvas.width, canvas.height);

这样，如果你改变画布大小，整个事情仍然会被清除。