在 canvas 上绘制多边形时出现间隙
Gap when drawing polygon on canvas
我正在使用以下方法在 html canvas 上绘制多边形:
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();
不幸的是,它在多边形的末端留下了一个缺口。知道如何解决这个问题吗?
尝试再画一条边来填补空白:
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));
}
不是画到所有 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
的变化)
我正在使用以下方法在 html canvas 上绘制多边形:
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();
不幸的是,它在多边形的末端留下了一个缺口。知道如何解决这个问题吗?
尝试再画一条边来填补空白:
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));
}
不是画到所有 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
的变化)