html5 Canvas drawing tutorial (4) - Unclosed paths and gradient color filling methods

There are two general drawing methods, namely fill and stroke. The previous article has already talked about stroke methods. This article will talk about the method of filling graphics in Canvas.

Fill() is very straightforward? And just like strokeStyle represents stroke style, fillStyle represents fill style.

ctx.fillStyle = 'color'; the default fill style is opaque black

Can. Canvas will connect directly to the starting point from the end point of your current path and then fill it. As shown in the picture:

But you can find that the last paragraph has no strokes.

I remember that in our previous article we drew a square with 4 lines, but canvas is not so bad, and there is not even a function to draw a rectangle directly. You can use fillRect() to fill directly into a rectangle:

ctx.fillRect(x,y,width,height);

Here x and y refer to the coordinates of the starting point of the upper left corner of the rectangle, remember.

Speaking of fillRect, we have to mention strokeRect. You guessed it right, it means to directly stroke a rectangle.

There are also fillText and strokeText. As for the function, you may have guessed it. I won’t talk about it here, so everyone will preview it first.

In Canvas, gradient colors are also divided into two types, namely linear gradient and radial gradient, and the method of creating them is also independent. Let's first look at how to create linear gradients.

Create Linear Gradient = createLinearGradient - Look, still very direct words. His syntax is as follows:

createLinearGradient(x1,y1,x2,y2) has 4 parameters! It looks so complicated, but in fact this is quite simple, because we have already said that a point in a plane world is determined by the x-coordinate and the y-coordinate. Therefore, x1, y1 represents the starting point coordinates of a linear gradient, and x2, y2 represents the end point coordinates.

The benefits of doing this are obvious, and it is convenient if we want to create a oblique linear gradient. But let's try creating a horizontal linear gradient first.

var linear = ctx.createLinearGradient(100,100,200,100); Gradient seems to be created, so can we fill it? --This gradient is empty and has no color.

The method to add color to the gradient bar is addColorStop (position, color). But be aware that this addColorStop is not added to the brush, but to the variable that saves the gradient in front. I am linear here.

var linear = ctx.createLinearGradient(100,100,200,100);

linear.addColorStop(0,'#fff');

linear.addColorStop(0.5,'#f0f');

linear.addColorStop(1,'#333');

I used 3 addColorStops here, which means adding 3 colors to the gradient bar.

At this time, we can fill in the gradient color, but we must first assign the defined gradient to fillStyle.

var linear = ctx.createLinearGradient(100,100,200,100);

linear.addColorStop(0,'#fff');

linear.addColorStop(0.5,'#f0f');

linear.addColorStop(1,'#333');

ctx.fillStyle = linear; // Assign gradient to fill style

ctx.fillRect(100,100,100,100);

ctx.stroke();

Note that fillRect and strokeRect draw independent paths. For example, in the above code, the stroke is called after fillRect, and the rectangle just drawn will not be stroked. The same is true for strokeRect.

After testing, I found a very painful problem, that is, the coordinates of linear gradients are relative to the entire Canvas range. For example, here, my linear gradient starts at 100,100. If I draw a rectangle at 0,0 and fill it with this gradient, I will find that there is no fill - because the range of my gradient simply exceeds the range of the rectangle.

This is really a scam setting.

meeting. The color before the starting point is the starting point color, and the color after the end point is always the end point color.

How to terminate the end point color, you can fill in a transparent end color after the end color. like:

linear.addColorStop(0.99,'#333');

linear.addColorStop(1,'rgba(51,51,51,0)');

According to the previous plan, I will try to build another tilted linear gradient. Just change the parameters of createLinearGradient.

var linear = ctx.createLinearGradient(100,100,200,200);

The effect is shown in the picture:

Then, let's try radial gradients (circular gradients). Similar to createLinearGradient, the method of creating radial gradients is: createRadialGradient, but their parameters can be very different:

createRadialGradient(x1,y1,r1,x2,y2,r2) in which x1,y1,x2,y2 still represents the starting point and the end point, but the starting point and the end point here are both a circle, and x,y are the coordinates of the center of the circle. Therefore, r1 and r2 are the radius of the starting point circle and the radius of the end point circle, respectively. As shown in the picture:

In my impression, it seems that the radial gradient is a circle, the center of the circle is the starting point, and the radius of the circle is the end point. But the radial gradient in canvas is actually different. The starting point is a circle and the end point is a circle, which is different from my understanding.

Let's start with the simplest. First, make a very regular radial gradient, that is, the center of the gradient circle is the starting point of the gradient. Due to the regular radial gradient, the center is the center of the circle, we should try to avoid skew. So, let’s overlap the center of the end circle with the center of the starting circle?

var radial = ctx.createRadialGradient(55,55,10,55,55,55); //Corresponding center coordinates

radial.addColorStop(0,'#fff');

radial.addColorStop(0.5,'#ff0');

radial.addColorStop(0.9,'#555');

radial.addColorStop(1,'#f00');

The radial gradient starting point circle and ending circle center coordinates I set here are the same, while the radius of the starting point circle is 10 and the radius of the ending point circle is 55. The last radial gradient range drawn is a circle with a width and height of 110, indicating that the gradient range is based on the range of the ending point circle.

(You can see that there is still color outside the end circle range, and this color is the end color. However, if you try to use radial.addColorStop(1.5, '#0f0'); to define colors outside the gradient range, you will still receive an error).

So, what is the use of the radius of the starting point circle? - The center of the normal radial gradient (let's call it the change of heart...) is just a point, not a circle. Actually, we are right. This starting point circle is just like a dot, but it may be relatively large.

Let's make the radius of the starting circle very large, close to the radius of the end circle:

var radial = ctx.createRadialGradient(55,55,50,55,55,55); // Very close

The other colorStops remain unchanged, and then the graphics become like this.

In other words, the starting color of the radial gradient in canvas is drawn from outside the range of the starting circle, and the entire color of the starting circle is the starting color.

Let us set the radius of the starting point circle to 0, and the radial gradient center change is really a point.

Most of the time, we do not need a very formal radial gradient, but instead hope that its change of heart is offset, similar to the figure below:

At this time, the advantage of the two circles of the radial gradient of canvas comes out. As long as the center of the starting point circle and the end point circle does not overlap, the change of heart will also shift:

var radial = ctx.createRadialGradient(75,75,0,55,55,55); but the gradient range at this time is still the range of the end circle.

Many people are born with a mentality of destruction. For example, here, the radius of the end circle is always larger than the starting circle, but what happens if they are reversed?

var radial = ctx.createRadialGradient(75,75,55,55,55,0);

After testing, there will be no errors, but the original gradient from the inside to the outside has turned into a gradient from the outside to the inside. This is a good way to use it.

There is another problem. If we shift the center of the starting circle and the range of the starting circle exceeds the range of the end circle,

What happens at this time?

ah! ? What's the situation? !

This situation occurs when the starting circle and the end circle only partially overlap. So, if you need normal radial gradients, make sure that one of the circles completely enclose the other.

In addition, since the gradient can be assigned to fillStyle, it can also be assigned to strokeStyle. You know the effect.