帆布畫弧造型奇特 - CoffeeScript的

Question

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

有什麼理由代碼會使上面的圖片？

Answer 1

我試過了你的弧的版本，我發現很難理解你實際要問什麼。因此我製作了兩個版本，以便直觀地向您展示發生了什麼。

你可以在這裏看看它們！ 已更新的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(); 

Answer 2

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