HTML5 concise tutorial-1.1.4.HTML5Canvas reference manual-radiation gradient createRadialGradient, html5canvas

HTML5 concise tutorial-1.1.4.HTML5Canvas reference manual-radiation gradient createRadialGradient, html5canvas

Connection: http://blog.csdn.net/tomorrow13210073213/article/details/42486639

Reprinted please indicate the source

In the previous blog, we introduced the HTML5 canvas to provide us with a method to draw a linear gradient. In this article, we will introduce another HTML5 gradient, a radiation gradient. CreateRadialGradient () is used to create a radiation gradient (). Similar to linear gradient, the createRadialGradient () method can be used to create a canvas-based linear gradient. The created linear gradient can be used to fill the path and define strokes.

Method: createRadialGradient ()
Method Name: createRadialGradient ()
Method Description: used to create a gradient based on the entire canvas. The gradient can be used to fill the path or define the stroke (as the value of the attribute fillStyle or strokeStyle)
Js Syntax: context. createRadialGradient (x0, y0, r0, x1, y1, r1 );
Parameter: x0: x coordinate of the starting circle of the gradient,
Parameter: y0: y coordinate of the starting circle of the gradient,
Parameter: r0: the radius of the Start circle,
Parameter: x1: x coordinate of the ending circle of the gradient,
Parameter: y1: y coordinate of the ending circle of the gradient,
Parameter: r1: radius of the ending circle
Browser compatibility: IE 9, Firefox, Opera, Chrome, and Safari support the createLinearGradient () method.
Note: (1) After obtaining the gradient object, we need to use the addColorStop () method to specify different colors and where to locate the color in the gradient object. This method is described in another blog.
(2) The gradient defined by the createRadialGradient () method is based on the entire canvas. It is invisible only by defining the gradient. After defining the gradient as the value of the fillStyle or strokeStyle attribute, we actually show the gradient of the rectangle (surface or stroke) and circle (surface or stroke) defined by the path.

The definition and application of the createRadialGradient () method are basically the same as those of createLinearGradient (). The parameters of the createRadialGradient () method are different only because the gradient types are different.

The following is our test code:

<! DOCTYPE html> 

The following is a test: