javascript - Fill polygon on canvas - Stack Overflow

admin管理员组

文章数量:1290104

How can I fill the path that I've drawn in red?

/

I've tried to use fill but it doesn't fill my path as I want it to - that is to fill in the red outline - but instead it fills only a diagonal portion (ment out the ctx.fill(); to see the full outline I want to fill) The code that's drawing the line is this:

//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();

}

How can I fill the path that I've drawn in red?

http://jsfiddle/MVXZu/1/

I've tried to use fill but it doesn't fill my path as I want it to - that is to fill in the red outline - but instead it fills only a diagonal portion (ment out the ctx.fill(); to see the full outline I want to fill) The code that's drawing the line is this:

//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();

}

• javascript
• canvas
• html5-canvas

Share Improve this question Follow edited Sep 16, 2013 at 22:25 Mike Rifgin asked Sep 16, 2013 at 22:14 Mike RifginMike Rifgin 10.8k2222 gold badges7777 silver badges115115 bronze badges 3

• 1 Why is your beginPath inside the loop? – user1064590 Commented Sep 16, 2013 at 22:28
• Oh that's a mistake - fixed – Mike Rifgin Commented Sep 16, 2013 at 22:29
• 1 Do not put context settings inside the loop.. linewidth etc.. you are not changing it and have to set it only once. – user1064590 Commented Sep 16, 2013 at 22:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

• Don't put the beginPath into the loop
• Don't use moveTo, as that creates a new polygon to fill (see it here, as the result of closePath()). You're at the correct position after the before lineTo anyway. Without it it works better…

Here's the fixed fiddle: http://jsfiddle/MVXZu/3/

Pseudo-code:

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();

Hopefully this is what you were wanting: http://jsfiddle/MVXZu/2/

Because you were only running some of the code if (i == 13) {}, only the moveTo and the first lineTo were getting called. This was resulting in a line at the top of the section, but not a box to fill.

I moved a lot of the drawing outside of the loop. It creates the first point in the bottom left of the graph, then the points along the top, then the point in the bottom right. Then it fills in the whole graph after the path is finished.

本文标签： javascriptFill polygon on canvasStack Overflow