帆布画弧造型奇特 - 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 ...将路径关闭回第一个点，您可能需要在关闭路径之前或之后填充描边或填充，具体取决于您寻求的内容。