HTML5 Canvas 渐变

HTML5 Canvas gradients can be used as the color mode for filling or strokes of shapes, rather than plain color. The gradient is a color mode that transitions from one color to another. There are two types of gradients: Linear (linear) and Radial (radial)

HTML5 Canvas gradients can be used as the color mode for filling or strokes of shapes, rather than plain color. The gradient is a color mode that transitions from one color to another. Here are some examples to illustrate my point:

There are two types of gradients:

1. Linear

2. Radial

Linear gradients use horizontal, vertical, or diagonal linear patterns to change color.
Radial gradients use a circular pattern to change color, changing color from inside to outside.
Two types of gradients are introduced in this article.

linear gradients

As mentioned earlier, linear gradients use a linear pattern to change color. Use2D context function to create a linear gradient createLinearGradient(). Here 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 takes4parameters: x1, y1This2, y2。4parameters determine the direction and extension of the gradient pattern. The gradient starts from the first point x1, y1Extending to the second point x2, y2。
by changing only the x-axis parameter values (for x1, and x2）as shown below:

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

Create horizontal gradients by changing only the y-axis parameter values (for y1and y2）to create a vertical gradient, as shown below:

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

Create diagonal gradients by changing the x and y axis parameters at the same time. Here is an example:

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

Color stop

The example above does not show the gradient colors. To set the gradient colors, you can use the addColorStop() function on the gradient object. Here is an example:

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

The addColorStop() function has2parameter. The first parameter is between1The numbers. This number indicates where the color stop will be placed in the gradient area. The second parameter is the color itself. Note how this example uses the rbg(red, green, blue) color notation, where each red/Green/The blue value can be between255The numbers between1bytes represent).
The example above adds two color stops. The first one is red, set to start from the beginning of the gradient (the first parameter value is 0). The second color is black, set to the end of the gradient area (the first parameter is1）。
You can add more than two color stops to a gradient. This is an example with3an example of color stops:

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)');

This example adds blue in the middle of the gradient. The gradient will therefore smoothly change from red to blue, and then to black.

Using gradients as fill or stroke styles

You can use gradients as fill or stroke styles. Just set2D context.fillStyle or strokeStyle property is set to point to the gradient object to complete this operation. This is an example:

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;

Now, you can use gradients as fill or stroke colors for drawing. This is an example of drawing two rectangles-One is filled and the other is outlined (outlined):

<canvas id="ex2" width="500" height="125" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(0,0,100,0);　//horizontal gradient
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.fillRect(10,10,100,　100);
var linearGradient2　= context.createLinearGradient(125,0,　225,0);　//horizontal gradient
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);
</script>

This is the result of drawing on the canvas:

gradient gradient range

It is important to understand the degree of the gradient. If the gradient ranges from x = 10will extend to x = 110Then, only x values between10to110between the graphics will apply gradient colors. Graphics drawn outside this area will still be affected by the gradient, but will be drawn with the first or last color of the gradient.
For example, assume a gradient from x = 150 will extend to x =350. The gradient will change from blue to green. x values less than15all graphics drawn with x value greater than35all graphics drawn with x value between 0 will be drawn in green. Only x values between15and35between 0 and the graphics will have gradient colors.
This is a code example that uses the gradient above to draw5a rectangle to illustrate this

<canvas id="ex3" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(150,　0,　350,0);
linearGradient1.addColorStop(0,39;rgb(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);
</script>

This is the result when drawing on the canvas. Note that only the x value in150 to350 between the graphics to have gradient colors, while the rest of the graphics are full blue (the first color stop) or full green (the last color stop).

This example only uses2colors, but if3colors, the effect is the same. Outside the gradient area, only the first and last stop colors are used.
The gradient degree is important for understanding the correct coloring of shapes. In many cases, it may be necessary to define a gradient specifically for each shape to fit the area to be drawn.

Radial gradient

Radial gradient type is a circular pattern that extends from an internal color to one or more other colors. Here are some graphic examples:

Radial gradient is by2a circle definition. Each circle has a center point and a radius. Here is a code example:

var x1　=　100;　　　//　x　of　1.　circle　center　point
var y1　=　100;　　　//　y　of　1.　circle　center　point
var r1　=　30;　　　　//　radius　of　1.　circle
var x2　=　100;　　　//　x　of　2.　circle　center　point
var y2　=　100;　　　//　y　of　2.　circle　center　point
var r2　=　100;　　　//　radius　of　2.　circle
var radialGradient1　= context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0,39;rgb(0,　255)');
radialGradient1.addColorStop(1, 'rgb(0,　255, 0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

As you can see, two center points (x1, y1, and x2, y2). And define two radii (r1and r2). These are passed as parameters to createRadialGradient()2The function of D context.
Two circles should be defined with different radii, so they will result in an inner circle and an outer circle (at least in size). Then, the color in the gradient will extend from one circle to another.
Works in the same way as a linear gradient. They define what color to use in the gradient and where to place the color within the gradient range.
The added color stops will match at some position between the two circles. For example, the first parameter 0 in the color stop indicates that the color will start from the place where the first circle begins. The first parameter in the color stop1It indicates that the color will start from the place where the second circle begins.
This is in HTML5The result of the code example drawn on the canvas:

If two circles have the same center point, the gradient will be perfectly circular, and the color will gradually change from the inner circle to the outer circle. If the centers of the two circles are different, the gradient will be more like a conical shape, similar to the light projected from a lamp (not orthogonally pointing to the surface). Here is a similar conical code 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,39;rgb(0,　255)');
radialGradient1.addColorStop(1, 'rgb(0,　255, 0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

This is what it looks like when drawing a gradient on the canvas: