HTML5 gradient implementation, html5 gradient

HTML5 gradient implementation, html5 gradient
Gradient

You can use createLinearGradient () and createRadialGradient () to create a gradient object. The prototype of the two methods is as follows:

Object createLinearGradient (x1, y1, x2, y2 );

Create a linear gradient object from (x1, y1) to (x2, y2.

Object createRadialGradient (x1, y1, r1, x2, y2, r2 );

Create a radial gradient object from the circle with (x1, y1) as the center and r1 as the radius to the circle with (x2, y2) as the center and r2 as the radius.

After a gradient object is created, you must use its addColorStop () method to add colors. The prototype of this method is as follows:

Void addColorStop (position, color );

Position indicates the position of the added color. The value range is [0, 1]. 0 indicates the start point and 1 indicates the end point. color indicates the added color. The value can be any CSS color value.

After the gradient object is created and configured, you can assign it to the strokeStyle or fillStyle attribute of the Context object. Then, the drawn image has the required gradient effect.

Let's take a look at the following example:

<! DOCTYPE html> 



Shows the effect:


Try it! Where can I communicate with each other.