Shulou(Shulou.com)06/03 Report--

This article mainly shows you "html5 Canvas how to fill graphics", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "html5 Canvas how to fill graphics" this article.

Filling is fill (), which is pretty straightforward, isn't it? And just like strokeStyle represents a stroke style, fillStyle represents a fill pattern.

Ctx.fillStyle = 'color'; the default fill pattern is opaque black

Question: can the unclosed path be filled?

Sure. Canvas will connect directly to the starting point from the end of your current path, and then populate it. As shown in the figure:

But as you can see, there is no stroke in the last paragraph.

I remember our previous article drew a square with four lines, but canvas wouldn't be so bad that it didn't even have a function to draw a rectangle directly. You can fill a rectangle directly with fillRect ():

The code is as follows:

Ctx.fillRect (xpendium, widthand height)

The x _ ray y here refers to the coordinates of the starting point of the upper left corner of the rectangle, remember.

When it comes to fillRect, you have to mention strokeRect. You guessed it, he means to stroke a rectangle directly.

And fillText and strokeText, as for the role, you may have guessed, I will not talk about it here, let's preview it first.

Canvas filling gradual discoloration

In Canvas, there are also two types of gradients, linear gradients and radial gradients, and the methods for creating them are independent. Let's first look at how to create a linear gradient.

Create a linear gradient = createLinearGradient-- look, still very straightforward words. His grammar is as follows:

CreateLinearGradient (x1century y1rex2recovery2) has four parameters! It looks complicated, but it's actually quite simple, because as we said earlier, a point in the plane world is determined by x and y coordinates. So, x1 is the starting point of a linear gradient, and x2 is the end point.

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

Var linear = ctx.createLinearGradient (100100200100); the gradient seems to have been created, so can we fill it? -this gradient is empty and has no color.

The way to add color to the gradient bar is addColorStop (position, color). Note, however, that this addColorStop is not added to the brush, but to the previous variable that holds the gradient. Here is linear.

The code is as follows:

Var linear = ctx.createLinearGradient (100100200100)

Linear.addColorStop (0)

Linear.addColorStop (0.5 ~ 0f')

Linear.addColorStop (1)

I used three addColorStop here, that is, I added three colors to the gradient bar.

Note: the position parameter of addColorStop is always a number between 0-1, which can be two decimal places, representing a percentage. He can't accept parameters like '3px'.

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

The code is as follows:

Var linear = ctx.createLinearGradient (100100200100)

Linear.addColorStop (0)

Linear.addColorStop (0.5 ~ 0f')

Linear.addColorStop (1)

Ctx.fillStyle = linear; / / assign a gradient to a fill pattern

Ctx.fillRect (100100100100)

Ctx.stroke ()

Note that both fillRect and strokeRect draw independent paths, such as the above code. Calling the stroke after fillRect does not strokeRect the rectangle stroke you just drew.

After testing, we found a very painful problem, that is, the coordinates of the linear gradient are relative to the whole Canvas range. For example, in my case, the starting point of my linear gradient is 100.100. If I draw a rectangle at zero zero and fill it with this gradient, I will find that there is no filling-- because the range of my gradient is simply beyond the range of the rectangle.

This is really a ridiculous setting.

Question: will the color be filled before and after the end of the gradient?

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

How to end the end color, you can fill in a transparent end color after the end color. Such as:

The code is as follows:

Linear.addColorStop (0.99)

Linear.addColorStop (1 recorder rgba (51pr 51pr 0)')

According to the previous plan, I will try to build a sloping linear gradient. You only need to change the parameters of createLinearGradient.

The code is as follows:

Var linear = ctx.createLinearGradient (100100200200)

The effect is as shown in the figure:

Then, let's try a radial gradient (circular gradient). Similar to createLinearGradient, the way to create a radial gradient is: createRadialGradient, but their parameters can be very different:

CreateRadialGradient (x1magentic y1rect x2rect y2rer 2) in which x1memery y1rect x2jiny2 still represents the starting point and the end point, but here the starting point and the end point are both a circle, and XQuery y is the coordinate of the center. Therefore, R1 and R2 are the radius of the starting circle and the radius of the end circle, respectively. As shown in the figure:

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. But the radial gradient in canvas is actually different. There is a gap between the starting point and the end point, which is different from my understanding.

Let's start with the simplest. First of all, do a very regular 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 circle, so we should try our best to avoid deflection. So, shall we coincide the center of the end circle with the center of the starting circle?

The code is as follows:

Var radial = ctx.createRadialGradient (55, 55, 55, 10, 55, 55, 55); / / coincident center coordinates

Radial.addColorStop (0)

Radial.addColorStop (0.5)

Radial.addColorStop (0.9)

Radial.addColorStop (1)

Here, the center coordinates of the radial gradient start circle and the end circle are the same, while the radius of the start circle is 10 and the radius of the end circle is 55. Finally, the 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 end circle.

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

So what's the use of the radius of the starting circle? -- the center of the normal radial gradient (let's call it "change of heart". It's just a dot, not a circle. In fact, we are right, this starting circle is equivalent to 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:

The code is as follows:

Var radial = ctx.createRadialGradient (55, 55, 55, 50, 55, 55, 55); / / very close.

The other colorStop remains the same, and then the graphics look like this.

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

If we set the radius of the starting point circle to 0, the "metamorphosis" of the radial gradient is really a point.

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

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

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

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

The code is as follows:

Var radial = ctx.createRadialGradient (75, 75, 55, 55, 55, 55 and 0)

After testing, this will not report an error, 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 use.

There is another problem, if we offset the center of the starting circle, and the range of the starting circle is beyond the range of the end circle.

What happens then?

Ah!? What's going on?!

This happens when the start circle and the end circle only partially overlap. So, if you need a normal radial gradient, make sure that one circle completely surrounds the other.

In addition, since gradients can be assigned to fillStyle, they can also be assigned to strokeStyle.

The above is all the content of the article "how to fill graphics with html5 Canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.