javascript - 在画布上填充多边形

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无论如何，你在之前的正确位置。没有它，效果会更好……</li>

这是固定的小提琴：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) {}，所以只有 themoveTo和 firstlineTo被调用。这导致该部分顶部有一条线，但没有要填充的框。

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