画布弧线画出奇怪的形状-coffeescript答案

【问题标题】：Canvas arc drawing strange shapes - coffeescript画布弧线画出奇怪的形状-coffeescript
【发布时间】：2014-02-16 17:52:08
【问题描述】：

@.ctx.lineWidth = 20
@.ctx.moveTo(i.x, i.y)
@.ctx.arc(i.x, i.y, 3, 0, Math.PI * 2)

该代码为什么会生成上面的图像？

【问题讨论】：

标签： javascript html canvas coffeescript drawing

【解决方案1】：

我尝试了您的 arc 版本，但我发现很难理解您的实际要求。因此，我制作了两个版本，以便直观地向您展示正在发生的事情。

您可以在这里查看它们！ 更新的 JSFIDDLE http://jsfiddle.net/hqB6b/2/

HTML

First with the line inside.

<canvas id="ex" width="300" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Second with NO line inside!

<canvas id="example" width="300" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

var example = document.getElementById('example');
var ctx = example.getContext('2d');
var i = {x:100,
    y:100}
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 1;

ctx.moveTo(i.x, i.y)
//HERE BEGINPATH IS USED AFTER MOVETO
ctx.beginPath();
ctx.arc(i.x, i.y, 50, 0, Math.PI * 2)
ctx.stroke();


var ex = document.getElementById('ex');
var ct = ex.getContext('2d');
var i = {x:100,
    y:100}
ct.strokeStyle = '#ff0000';
ct.lineWidth = 1;

//HERE BEGINPATH IS USED BEFORE MOVETO
ct.beginPath();
ct.moveTo(i.x, i.y)
ct.arc(i.x, i.y, 50, 0, Math.PI * 2)
ct.stroke();

【讨论】：

谢谢，在 beginPath 之前使用 moveTo 解决了问题

【解决方案2】：

创建路径前使用beginPath，创建路径后使用closePath。
由于 closePath... 会关闭返回到第一个点的路径，因此您可能需要在关闭路径之前或之后进行描边或填充，具体取决于您所寻找的内容。

【讨论】：

+1 - 虽然这并没有解决问题，但我实际上并不知道关闭路径（出于某种原因），所以这帮助了我。