Question

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

我尝试过使用填充，但它并没有像我想要的那样填充我的路径 - 即填充红色轮廓 - 但它只填充对角线部分（注释掉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，因为它会创建一个新的多边形来填充（请参阅here，作为closePath()的结果）。无论如何，你在lineTo之前处于正确的位置。 Without it效果更好......

这是固定的小提琴：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。这导致该部分顶部有一条线，但不是一个要填充的框。

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

在画布上填充多边形

2 个答案: