在画布上绘制多边形时的间隙答案

【问题标题】：Gap when drawing polygon on canvas在画布上绘制多边形时的间隙
【发布时间】：2015-02-10 04:21:21
【问题描述】：

我正在使用以下内容在 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

【问题讨论】：

标签： javascript html canvas

【解决方案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 的变化）

【讨论】：

【解决方案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));
}

【讨论】：