【发布时间】：2015-09-08 19:16:45
【问题描述】：
我正在学习使用 HTML5 画布，我决定制作一个圆圈的动画：
http://codepen.io/anon/pen/KdpyVm
它正确地从一个点开始绘制，然后完成圆。但显然有一些基本的东西我不明白。
- 为什么弧线在绘制时最初显示为粗体，然后线条变细了 3/4？它会以某种方式重绘自身吗？
- 圆弧
endAngle达到2PI，为什么不重新开始？
【问题讨论】：
标签： javascript html canvas
【发布时间】：2015-09-08 19:16:45
【问题描述】：
您没有清除整个画布（仅左上角部分），因此线条中的额外厚度发生在重新绘制圆圈时未清除的画布部分：
ctx.clearRect(0,0,600,600);
【讨论】：
-
您还可以通过在
draw中评论对requestAnimationFrame的调用来查看这是由其他图纸引起的
正如 Spencer Wieczorek 所说，您并没有清理整个画布。
您应该使用画布自己的宽度和高度来清除画布。
变化：
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);
这样，如果你改变画布大小，整个东西仍然会被清除。
【讨论】：