差距在畫布上

Question

畫多邊形，當我用下面畫上一個HTML畫布多邊形：

var canvas = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

var numberOfSides = 6, 
    size = 20, 
    Xcenter = 25, 
    Ycenter = 25; 

ctx.beginPath(); 
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   

for (var i = 1; i <= numberOfSides;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
} 

ctx.strokeStyle = "#000000"; 
ctx.lineWidth = 10; 
ctx.stroke(); 

不幸的是，它的葉子在多邊形的最後一個缺口。任何想法如何解決這個問題？

Jsfiddle here

Answer 1

而不是繪製所有6分，只畫到第5，然後調用ctx.closePath();

http://jsfiddle.net/757mavjb/2/

var canvas = document.getElementById("mycanvas"); 
var ctx = canvas.getContext("2d"); 

var numberOfSides = 6, 
    size = 20, 
    Xcenter = 25, 
    Ycenter = 25; 

ctx.beginPath(); 
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   

for (var i = 1; i < numberOfSides;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
} 
ctx.closePath(); 

ctx.strokeStyle = "#000000"; 
ctx.lineWidth = 10; 
ctx.stroke(); 

（注意從i <= numberOfSides到i < numberOfSides的變化）

Answer 2

嘗試以繪製多一個側填補了國內空白：

for (var i = 1; i <= numberOfSides+1;i += 1) { 
    ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
}