HTML5Canvas: Draw gradient-

HTML5Canvas gradient is a color pattern used to fill or stroke a graph. Gradient color is a transition from different colors, rather than a single color. The gradient is divided into linear gradient and radial gradient according to the type. Let's take a look at several examples of canvas fading ...,. HTML5 CANVAS: Draw gradient

HTML5 Canvas gradient is a color pattern used to fill or stroke a graph. Gradient color is a transition from different colors, rather than a single color. Let's take a look at several examples of canvas gradient:

As mentioned above, linear gradient changes color in linear mode. We can use the createLinearGradient () method in 2D context to create a linear gradient. The following is an example:

var canvas  = document.getElementById("ex1");var context = canvas.getContext("2d");var x1 =   0;var y1 =   0;var x2 = 100;var y2 =   0;var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);      

The createLinearGradient () function has four parameters: x1, y1, x2, and y2. The four parameters determine the gradient direction and distance. The linear gradient is extended from the first vertex (x1, y1) to the second vertex (x2, y2 ).

A horizontal linear gradient is only a parameter value in the horizontal direction (x1 and x2), for example:

var x1 =   0;var y1 =   0;var x2 = 100;var y2 =   0;var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);      

The vertical linear gradient is only different from the vertical parameter values (y1 and y2). For example:

var x1 =   0;var y1 =   0;var x2 =   0;var y2 = 100;var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);                                 

The horizontal and vertical parameters of a diagonal linear gradient are different. For example:

var x1 =   0;var y1 =   0;var x2 = 100;var y2 = 100;var linearGradient1 = context.createLinearGradient(x1,y1,x2,y2);                                 

　　Color Stops)

In the preceding example, the color of the linear gradient is not specified. To specify the gradient color, you can use the addColorStop () method on the gradient object. For example:

var linearGradient1 = context.createLinearGradient(0,0,100,0);linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');linearGradient1.addColorStop(1, 'rgb(  0, 0, 0)');            

The addColorStop () method has two parameters. The first parameter is a value between 0 and 1, which specifies the distance from the color to the gradient. The second parameter is the color value. In this example, the rgb () color value is used.

In the preceding example, two colors are added for the gradient. The first color is red and is set at the beginning of the gradient. The second color is black and is set at the end of the gradient.
You can add more colors by using the addColorStop () function. For example, the following example adds three colors:

var linearGradient1 = context.createLinearGradient(0,0,100,0);linearGradient1.addColorStop(0  , 'rgb(255, 0, 0)');linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255);linearGradient1.addColorStop(1  , 'rgb(  0, 0, 0)');      

The above Code adds a blue color in the middle of the gradient. The entire gradient will smoothly transition from red to blue, and then transition to black.

　　Fill and draw images with Gradient

You can use a gradient to fill or draw an image. You can use the fillStyle or strokeStyle attribute of the 2D context to fill or stroke a graph. The following is an example code:

1. var linearGradient1 = context.createLinearGradient(0,0,100,0);linearGradient1.addColorStop(0  , 'rgb(255, 0, 0)');linearGradient1.addColorStop(0.5, 'rgb(  0, 0, 255);linearGradient1.addColorStop(1  , 'rgb(  0, 0, 0)');context.fillStyle   = linearGradient1;context.strokeStyle = linearGradient1;

You can point to the gradient object through the fillStyle or strokeStyle attribute to complete the gradient filling or stroke.

Now we can fill the graph with gradient or stroke gradient. The following is an example. The fill gradient of a rectangle and the stroke gradient of a rectangle are gradient.

var canvas  = document.getElementById("ex2");var context = canvas.getContext("2d");var linearGradient1 = context.createLinearGradient(0,0,100,0);linearGradient1.addColorStop(0  , 'rgb(246, 36, 89)');linearGradient1.addColorStop(0.5, 'rgb( 31, 58, 147)');linearGradient1.addColorStop(1  , 'rgb( 34, 49,  63)');context.fillStyle = linearGradient1;context.fillRect(10,10,100, 100);var linearGradient2 = context.createLinearGradient(125,0, 225,0);linearGradient2.addColorStop(0  , 'rgb(255, 0,   0)');linearGradient2.addColorStop(0.5, 'rgb(  0, 0, 255)');linearGradient2.addColorStop(1  , 'rgb(  0, 0,   0)');context.strokeStyle = linearGradient2;context.strokeRect(125, 10, 100, 100);    

The following code draws five Rectangles and fills them with the gradient mentioned above. Let's take a look at the effect:

var linearGradient1 = context.createLinearGradient(150, 0, 350,0);linearGradient1.addColorStop(0, 'rgb(0,   0, 255)');linearGradient1.addColorStop(1, 'rgb(0, 255, 0)');context.fillStyle = linearGradient1;context.fillRect(10,10,130, 100);context.fillRect(150,10, 200, 100);context.fillRect(360,10, 130, 100);context.fillRect(100,120, 150, 100);context.fillRect(280,120, 150, 100);      

A radial gradient is defined in two circles. Each circle has a center and a radius. The following is the sample code:

Var x1 = 100; // The X coordinate var y1 = 100 of the first circular heart; // The Y coordinate var r1 = 30 of the first circular heart; // The radius of the first circle var x2 = 100; // The X coordinate var y2 = 100 of the second circular center; // The Y coordinate var r2 = 100 of the second circular center; // The radius of the second circle var radialGradient1 = context. createRadialGradient (x1, y1, r1, x2, y2, r2); radialGradient1.addColorStop (0, 'rgb (0, 0,255) '); radialGradient1.addColorStop (1, 'rgb (0,255, 0) '); context. fillStyle = radialGradient1; context. fillRect (200,200 );

As shown in the code above, there are two circles, the center of which is x1, y1, x2, y2, and their radius are r1 and r2, respectively, these values are passed as parameters to the createRadialGradient () method in the 2D context.

The two circles must have different radius to form an inner circle and an excircle. In this way, the gradient changes from a circle to another circle.

The color stop point is added between the two circles. For example, in the code above, the parameter 0 in the first color stop point indicates that the color starts from the first circle, parameter 1 in the second color stop point indicates that the second color starts from the second circle.

The returned results of the above Code are as follows:

If the center of the two circles is the same, the radial gradient will be a complete circle. If the center of the two circles is different, the radial gradient looks like the light from a searchlight. For example:

var x1 = 100;var y1 = 100;var r1 = 30;var x2 = 150;var y2 = 125;var r2 = 100;var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);radialGradient1.addColorStop(0, 'rgb(0,   0, 255)');radialGradient1.addColorStop(1, 'rgb(0, 255,   0)');context.fillStyle = radialGradient1;context.fillRect(10,10, 200, 200);         

The structure is as follows:

The above is the HTML5 Canvas: draws the gradient content. For more information, see PHP Chinese Network (www.php1.cn )!

Related Articles:

Css button gradient

Sample Code for gradient of p + css background

Css gradient color omitted flag embedded font text shadow details