畫布弧形繪制奇怪的形狀 - coffeescript

Question

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

為什么代碼會使上面的圖像？

Answer 1

在創建路徑之前使用beginPath，並在創建路徑后使用closePath。
由於closePath ...將路徑關閉回第一個點，因此您可能需要在關閉路徑之前或之后進行描邊或填充，具體取決於您尋找的內容。

Answer 2

我嘗試了你的弧形版本，我發現很難理解你的實際問題。 因此我制作了兩個版本，以便直觀地向您展示正在發生的事情。

你可以在這看看他們！ 更新的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>

JS

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();