HTML5 canvas drawing 4: Fill and Gradient

There are two ways to draw, fill and stroke.ArticleThe stroke method stroke has been discussed. 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 not transparent.Black

Question: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 the last sectionNo stroke.

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:

CTX. fillrect (X, Y, width, height );

Here, X and Y refer to the rectangle.Upper left cornerRemember the coordinates of the start point.

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 GradientAndRadial GradientAnd their creation methods are independent. Let's first look at how to create a linear gradient.

Create a linear gradient =Createlineargradient-- Look, there are still very direct words. The syntax is as follows:

 
Createlineargradient(X1, Y1, X2, Y2)
 

There are 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.

 
VaRLinear = 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.

The method to add color to the gradient bar isAddcolorstop (Position, color)But please note that this addcolorstop is not added to the paint brush, but to the variable that saves the gradient. Here I am linear.

 
VaRLinear = 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: addcolorstopLocationParameter, alwaysA number between 0 and 1, which can be two decimal places., IndicatesPercentage. 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.

 
VaRLinear = 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 StyleCTX. fillrect (100,100,100,100); CTX. Stroke ();//Useless
 

Note that both fillrect and strokerect drawIndependentPath, as shown aboveCodeThe stroke is called after fillrect, And the stroke of the rectangle just drawn is not. strokerect is the same.

After testing, I found a very painful problem, that is, the coordinate of the linear gradient isRelative to the entire canvasRange. 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.

Question:Will the color be filled before the gradient start point and after the gradient end point??

Yes. Starting PointBeforeThe color of is the starting color and ending point.AfterIs always the end color.

You can specify a transparent ending color after the ending color. For example:

 
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.

 
VaRLinear = 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)
 

The X1, Y1, X2, Y2 represent the start point and the end point, but the start point and the end point are both a circle, and X and Y represent 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. Due to the regular radial gradient, the center of the gradient is the center of the center, so we should try to avoid skew. Then, we place the center of the endpoint circle and the center of the start point circleCoincidenceRight?

 
VaRRadial = CTX. createradialgradient (55,55, 10,55, 55,55 );//Center Coordinate of coincidenceRadial. 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 the endpoint circle.Out of ScopeThere is still a color, this color is the end color, but if you try 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 (called"Heart changing"... 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:

 
VaRRadial = 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, andThe entire color of the starting circle is the starting color..

We set the radius of the starting circle0The radial gradient "Heart changing" 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:

 
VaRRadial = CTX. createradialgradient );
 

However, the gradient range is still the range of the final 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?

 
VaRRadial = CTX. createradialgradient (75,75, 55,55, 55,0 );
 

After testing, no error will be reported, but the original gradient from the inside outReverseThe 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 ?!

When the start and end circles are onlyPartially overlappedThis will happen. Therefore, if you need a normal radial gradient, pleaseMake sure that one circle fully occupies the other..

Postscript: Since the gradient can be assigned to fillstyle, it can also be assigned to strokestyle. You know the effect.

Alas, writing articles is hard. The loading of overseas space images is slow, so all the images are external links.

Original