在画布上填充多边形

Question

如何填充我用红色绘制的路径？

http://jsfiddle.net/MVXZu/1/

我尝试使用填充，但它没有像我想要的那样填充我的路径 - 即填充红色轮廓 - 但它只填充对角线部分（注释掉 ctx.fill(); 以查看我要填充的完整轮廓）绘制线条的代码是这样的：

//loop through the data
ctx.beginPath();
for (var i = 0; i < data.length; i++) {
ctx.lineWidth=3;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
ctx.moveTo(linePosX,linePosY);
ctx.lineTo((i*cellWidth) + cellWidth + padding,(tableHeight + padding) - data[i].v);
linePosX = i*cellWidth + padding + cellWidth;
linePosY = (tableHeight + padding) - data[i].v;
if(i == 13) {

    ctx.lineTo(linePosX,tableHeight+padding);
    ctx.lineTo(padding,tableHeight+padding);
}

   ctx.fillStyle="red";
   ctx.fill();
   ctx.stroke();
   ctx.closePath();

}

Answer 1

• 不要放入beginPath循环
• 不要使用moveTo，因为这会创建一个新的多边形来填充（参见此处，作为 的结果closePath()）。lineTo无论如何，您在 before 之后处于正确的位置。没有它效果会更好……

这是固定的小提琴：http : //jsfiddle.net/MVXZu/3/

伪代码：

ctx.beginPath();
// set ctx styles
ctx.moveTo( bottom-left corner );
for each (point in data) {
    ctx.lineTo(point);
}
ctx.lineTo( bottom-right corner );
ctx.closePath(); // automatically moves back to bottom left corner
ctx.fill();

Answer 2

希望这就是您想要的： http: //jsfiddle.net/MVXZu/2/

因为您只运行了部分代码if (i == 13) {}，所以只有第一个moveTo和第一个lineTo被调用。这导致该部分的顶部出现一条线，但没有一个要填充的框。

我将很多绘图移到了循环之外。它创建图表左下角的第一个点，然后是顶部的点，然后是右下角的点。然后在路径完成后填充整个图形。