HTML5 Canvas线条图

Question

I'm working on a program that sets variables to random numbers, and then creates a line across the canvas where the y coordinates are different each time. In the program, one button generates a bumpy line, and the other uses some code that makes a much smoother line.

Right now, I'm working on a way to fill the space below the randomly generated line so that it will resemble a hill, but I'm running into a few problems.

In the "text/javascript" area, I define the canvas and its coordinates, and all of the random y value variables (but they aren't used yet). If the "bumpy" button is clicked, it runs a function that sets the y coordinate variables to anything inside the canvas, and then draws the line. If the "Smooth" button is clicked, the code randomly sets the first y coordinate variable, and then sets the next variables to a coordinate either a little bit bigger, or a little bit smaller then the previous point, and then draws the line. The third button is called "fill." This button runs another function which checks to see if a hill has been drawn yet, and the begins drawing another line using all the y coordinate values +10. (In other words, draws a line directly beneath the original line.) My plan was for the button to draw lines like this all the way to the bottom of the canvas, thus filling the space beneath the line. This is where it gets weird, and I think the problem is that the "fill" button uses information (stored in variables) that was created in other functions.

What should I do?

Thanks in advance.

Answer 1

You just want to create your entire path whichever way you please but don't bother calling ctx.stroke() or ctx.fill(), then add two more line segments: One to the bottom right, then one to the bottom left.

So then you've just drawn three sides to a box. The top, right, and bottom. The top is actually a ton of line segments (or curves) but that doesn't matter, the idea is the same. Then you call ctx.fill() and it will fill in that box.

(You don't have to draw the left side since you're just filling. If you're stroking you'll want to call ctx.close () first)

So you call ctx.fill() once at the end and that entire bottom space will be filled

Here's a live example: http://jsfiddle.net/wKVRR/