[Go]HTML5 canvas Draw 4: Fill and gradient

In general, there are two ways to draw, that is, fill and stroke, the previous article has described the stroke method of stroke, this article on the canvas to fill the method of graphics.
Filling is fill (), is it straightforward? And as Strokestyle represents a stroke style, FillStyle represents a fill style.
Ctx.fillstyle = ' color '; The default fill style is opaque black

question: Are unclosed paths populated?
OK. The canvas connects directly to the starting point from the end of your current path and fills it.

But you can see that the last paragraph has no strokes.
Remember our previous article used 4 lines to draw a square, but the canvas is not so bad, even directly draw the rectangle function is not. You can fill a rectangle directly with FillRect ():

The code is as follows:

Here x, y refers to the coordinates of the beginning of the upper-left corner of the rectangle, remember.
Speaking of FillRect, you have to mention Strokerect, you guessed the right, he meant to direct the stroke out of a rectangle.
There are Filltext and Stroketext, as for the role, you may have guessed, I do not speak here first, we first preview it.

Canvas Fill Gradient
In canvas, gradients are also divided into two types, linear and radial, and the method of creating them is also independent. Let's look at how to create a linear gradient.
Create a linear gradient =createlineargradient--look, still very straight words. His syntax is as follows:
Createlineargradient (X1,y1,x2,y2) has 4 parameters! It looks so complicated, actually this is quite simple, because as we have said before, a point in the plane world is determined by the x-coordinate and the y-coordinate. So, X1,y1 is the starting coordinate of the linear gradient, and x2,y2 represents the end coordinate.
The benefit of doing this is obvious, if we want to create an oblique linear gradient, it is convenient. But let's first create a horizontal linear gradient and try it out.
var linear = ctx.createlineargradient (100,100,200,100); the gradient seems to have been created, so can we populate it? ———— This gradient is empty and has no color.
The way to add color to the gradient bar is addcolorstop (position, color). But notice that this addcolorstop is not added to the brush, but on the previous variable that holds the gradient, and 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 (

I used 3 addcolorstop, which adds 3 colors to the gradient bar.
Note : The positional parameter of the addcolorstop, which is always a number between 0-1, can be two decimal places, which represents the percentage. He was unable to accept parameters such as ' 3px '.
At this point, we can fill the gradient, but we must first assign the well-defined gradient to the 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.fillrect (100,100,100,100

Note that FillRect and Strokerect are all independent paths, such as the above code, which calls strokes after fillrect, and does not stroke the rectangle just drawn, strokerect the same.
After testing, a very painful problem was found, that is, the coordinates of the linear gradient are relative to the entire canvas range. For example, my linear gradient starting point is 100,100, and if I draw a rectangle in the 0,0 position and fill it with this gradient, I will find that there is no fill-because my gradient is more than the range of the rectangle.
This is really a pit-daddy setting.

Question: Will the color be filled before the start of the gradient and after the end of the gradient?
Yes. The color before the starting point is the starting color, and the color after the end point is always the finish color.
How to stop the finish color, you can fill in the end color after a transparent end color. Such as:

The code is as follows:

Linear.addcolorstop (0.99, ' #333 '); Linear.addcolorstop (

In accordance with the previous plan, I will try to build a sloping linear gradient. You only need to change the createlineargradient parameters.

The code is as follows:
var linear = ctx.createlineargradient (100,100,200,200);

Effect

Then, let's try a radial gradient (circular gradient). Similar to createlineargradient, radial gradients are created by: Createradialgradient, but their parameters can vary greatly:
Createradialgradient (X1,Y1,R1,X2,Y2,R2) X1,y1,x2,y2 still represents the starting and ending points, but the starting and ending points here are a circle, and X, y is the coordinate of the center. Therefore, R1 and R2 are the radii of the radius and end circle of the beginning circle respectively.

In my impression, it seems that the radial gradient is a circle, the center is the starting point, the radius of the circle is the end point. But the radial gradient inside the canvas is not the same, the beginning of a circle, the end of a circle, and my understanding there is a gap.
We start with the simplest. First, make a very normal radial gradient, that is, the center of the gradient Circle is the beginning of the gradient. Due to the normal radial gradient, the center is centered, so we should try to avoid deflection. So, do we overlap the center of the end Circle with the center of the beginning circle?

The code is as follows:

var //  radial.addcolorstop (0, ' #fff '); Radial.addcolorstop (0.5, ' #ff0 '); Radial.addcolorstop ( 0.9, ' #555 '); Radial.addcolorstop (

Here I set the radial gradient start and end circle with the same center coordinates, and the start circle radius is 10 and the end circle radius is 55. The last drawn radial gradient range is a circle with a width height of 110, indicating that the gradient range is the range of the end circle.
(You can see the end of the circle outside the range or there is a color, this color is the finish color, but if you try to use Radial.addcolorstop (1.5, ' #0f0), so as to define the gradient outside the range of colors, you will still receive an error).
So what is the radius of the starting circle? -The normal radial gradient of the center (called "Change of Heart" ...) BAR) is just a point and should not be a round one. In fact, we are right, the beginning of the circle is equivalent to a dot just, may be larger.
Let's make the radius of the starting circle very large, close to the radius of the end circle:

The code is as follows:

var //

The rest of the colorstop are the same, and then the graphics become like this.

That is, the starting color of the radial gradient in the canvas is drawn outside the range of the start circle, and the entire color of the start circle is the start color.
We set the radius of the starting circle to 0, the radial gradient of the "Change of Heart", it is really a point.
Most of the time we do not need a very regular radial gradient, but hope that his change of heart is offset, similar to:

This time, the canvas radial gradient two circle advantage is out, as long as we start the circle and the end of the circle is not coincident, then the change of heart will be offset:
var radial = ctx.createradialgradient (75,75,0,55,55,55), but this time the gradient range is still the range of the end circle ha.
Many people are born with a kind of destructive mentality, such as here, the radius of the end of the circle is always bigger than the beginning, but what if we turn them back?

The code is as follows:

Var

After testing, this will not error, but the original from the inside to outside of the gradient in turn into a gradient from the outside to the inside. This is a good use.

Another question, if we offset the center of the starting circle, and the range of the start circle is beyond the circle of the end,

What will happen then?

Ah!? What's the situation?!
This happens when the starting and ending circles overlap only partially. So, if you need a normal radial gradient, make sure one of the circles is completely wrapped up in another circle.
In addition, since gradients can be assigned to FillStyle, they can also be assigned to Strokestyle. The effect you know.

[Go]HTML5 canvas Draw 4: Fill and gradient