Simple HTML5 tutorial-1.1.4.HTML5Canvas reference manual-linear gradient createLinearGradient, html5canvas

Simple HTML5 tutorial-1.1.4.HTML5Canvas reference manual-linear gradient createLinearGradient, html5canvas

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

Reprinted please indicate the source

HTML5 canvas provides a gradient effect similar to the linear-gradient attribute defined in CSS3. You can use createLinearGradient () to create a canvas-based linear gradient, the created linear gradient can be used to fill the path and define strokes. At the same time, HTML5 provides the createRadialGradient () method for creating a radiation gradient. We will introduce it in detail in another blog.

Method: createLinearGradient ()

Method Name: createLinearGradient ()

Method Description: used to create a linear 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. createLinearGradient (x0, y0, x1, y1 );
Parameter: x0: x coordinate of the gradient start point,
Parameter: y0: y coordinate of the gradient start point,
Parameter: x1: x coordinate of the gradient end point,
Parameter: y1: y coordinate of the gradient end point

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 using the createLinearGradient () 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 following is the test code. The js comments contain the test description:

<! DOCTYPE html> 

The following is a test:
(The image cannot be uploaded. What about csdn? Let's test it by yourself)