There are two ways to draw a graph: Fill and stroke. The previous article has discussed the stroke method stroke, this article describes how to fill a graph in Canvas. Generally, there are two ways to draw a graph: Filling and stroke. The previous article has already discussed the stroke method stroke, this article describes how to fill the image in the Canvas.
Fill is fill (). Is it straightforward? In addition, like strokeStyle, fillStyle indicates the fill style.
Ctx. fillStyle = 'color'; the default fill style is opaque black
Q: Can an unclosed path be filled?
Yes. Canvas is directly connected to the start point from the end point of your current path and then filled in.
But you can find that there is no stroke in the last segment.
I remember that in the previous article, we used four lines to draw a square, but canvas would not be so bad, and there was no function to draw a rectangle directly. You can use fillRect () to directly fill a rectangle:
The Code is as follows:
Ctx. fillRect (x, y, width, height );
Here, x and y are the coordinates of the starting point in the upper left corner of the rectangle. Remember.
Speaking of fillRect, you have to mention strokeRect. You guessed it, it means to draw a rectangle directly.
There are also fillText and strokeText. As for their functions, you may have guessed it. I will not talk about it here. Let's preview it first.
Canvas fill gradient
In Canvas, gradient is also divided into two types: linear gradient and radial gradient, and their creation method is also independent. Let's first look at how to create a linear gradient.
Create a linear gradient = createLinearGradient -- see, still very direct words. The syntax is as follows:
CreateLinearGradient (x1, y1, x2, y2) has four parameters! It looks complicated. In fact, this is quite simple, because we have already mentioned that a point in the plane world is determined by the x and y coordinates. Therefore, x1 and y1 represent the start coordinate of the linear gradient, and x2 and y2 represent the end coordinate.
The advantage of doing so is obvious. If we want to create a oblique linear gradient, It is very convenient. But let's create a horizontal linear gradient first.
Var linear = ctx. createLinearGradient (100,100,200,100); the gradient seems to have been created. Can we fill it in? ---- This gradient is empty and has no color.
AddColorStop (Position, color) is used to add color to the gradient bar ). note that this addColorStop is not added to the paint brush, but to the variable that saves the gradient. Here I am linear.
The Code is as follows:
Var linear = ctx. createLinearGradient (100,100,200,100 );
Linear. addColorStop (0, '# fff ');
Linear. addColorStop (0.5, '# f0f ');
Linear. addColorStop (1, '#333 ');
I used three addColorStop here, which adds three colors to the gradient bar.
Note:: AddColorStop position parameter. It is always a number between 0 and 1. It can be two decimal places, indicating the percentage. It cannot receive parameters like '3px.
At this time, we can fill in the gradient, but we must first assign the defined gradient to fillStyle.
The Code is as follows:
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 the gradient to the fill Style
Ctx. fillRect (100,100,100,100 );
Ctx. stroke ();
Note that fillRect and strokeRect draw independent paths. The above code calls the stroke after fillRect and does not draw the rectangular stroke. strokeRect is the same.
After testing, we found a very painful problem, that is, the linear gradient coordinates are relative to the entire Canvas range. For example, here, the starting point of my linear gradient is 100,100. If I draw a rectangle at a position of 0 or 0, fill it with this gradient, we will find that there is no fill-because the gradient range is beyond the rectangle range.
This is really a trap.
Q: Will the gradient color be filled before the gradient start point and after the gradient end point?
Yes. The color before the start point is the start color, and the color after the end point is the end color.
You can specify a transparent ending color after the ending color. For example:
The Code is as follows:
Linear. addColorStop (0.99, '#333 ');
Linear. addColorStop (1, 'rgba (51,51, 51,0 )');
Based on the previous plan, I will try to create another skewed linear gradient. You only need to change the createLinearGradient parameter.
The Code is as follows:
Var linear = ctx. createLinearGradient (100,100,200,200 );
Effect
Next, let's try a radial gradient (Circular gradient ). Similar to createLinearGradient, the method for creating a radial gradient is createRadialGradient, but their parameters can be very different:
CreateRadialGradient (x1, y1, r1, x2, y2, r2) Where x1, y1, x2, y2 still indicates the start point and the end point, but here the start point and the end point are both a circle, x and y are the coordinates of the center. Therefore, r1 and r2 are respectively the radius of the starting circle and the radius of the ending circle.
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. However, the radial gradient in the canvas is actually different. There is a gap between the starting point and the ending point.
We start from the simplest. First, make a formal radial gradient, that is, the center of the gradient circle is the starting point of the gradient. Because of the regular radial gradient, the center is the center of the center, we should try to avoid skew. So, do we overlap the center of the endpoint circle with the center of the start point circle?
The Code is as follows:
Var radial = ctx. createRadialGradient (55,55, 10,55, 55,55); // The Center coordinate of the coincidence
Radial. addColorStop (0, '# fff ');
Radial. addColorStop (0.5, '# ff0 ');
Radial. addColorStop (0.9, '#555 ');
Radial. addColorStop (1, '# f00 ');
Here, the coordinates of the center of the start and end circles of the radial gradient are the same, the radius of the Start circle is 10, and the radius of the end circle is 55. the radial gradient range drawn at the end is a circle with a width and a height of 110, indicating that the gradient range is subject to the range of the endpoint circle.
(You can see that there is a color outside the circle range of the end point. This color is the end point color. However, if you attempt to use radial. addColorStop (1.5, '#0f0'); to define the color outside the gradient range, you will still receive an error ).
So what is the purpose of the radius of the starting point circle? -- Originally, the center of the normal radial gradient (also called "Changing hearts "... It's just a point and should not be a circle. In fact, we are right. This starting point circle is equivalent to a dot, but it may be relatively large.
Let's increase the radius of the starting point circle to the radius of the ending point circle:
The Code is as follows:
Var radial = ctx. createRadialGradient (55,55, 50,55, 55,55); // very close
The other colorstops remain unchanged, and then the image becomes like this.
That is to say, the starting color of the radial gradient in the canvas is drawn out of the range of the starting circle, and the entire color of the starting circle is the starting color.
We set the radius of the starting point circle to 0, and the "Heart changing" of the radial gradient is really a point.
Most of the time, we don't need a regular radial gradient. Instead, we want his heartbeat to be shifted, like:
At this time, the advantages of the canvas radial gradient of the two circles will come out, as long as our starting circle and the center of the endpoint circle do not overlap, the center will be shifted:
Var radial = ctx. createRadialGradient (,); but the gradient range is still the range of the end circle.
For example, the radius of the endpoint circle is always greater than that of the starting point circle. What if we turn them in turn?
The Code is as follows:
Var radial = ctx. createRadialGradient (75,75, 55,55, 55,0 );
After testing, no error will be reported, but the original gradient from the inside to the outside turns into a gradient from the outside to the inside. This is a useful method.
Another problem is that if we offset the center of the starting circle and the range of the starting circle is out of the range of the ending circle,
What will happen at this time?
Ah !? What is the situation ?!
This occurs when the starting and ending circles only partially overlap. Therefore, if you need a normal radial gradient, make sure that one of the circles fully enclose the other.
In addition, since the gradient can be assigned to fillStyle, it can also be assigned to strokeStyle. You know the effect.
