Html5 Canvas Preliminary Study Notes (9) - Gradient

This article continues to introduce the drawing effect of html5. Different from the previous introduction, the gradient introduced in this article is not a state value. It is the fillStyle introduced before. A value of . First let’s look at an example:

##The code is as follows :

var gradient = context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

This is a linear gradient. First create a linear gradient through

createLinearGradient. The four parameters are the horizontal and vertical coordinates of the starting point and the horizontal and vertical coordinates of the end point, and then Add the color value to the two points, 0 of addColorStop is the starting point, 1 is the end point, the second parameter is the color, which can be rgb or rgba.

The previous one is a linear gradient, and there is an arc gradient. The effect is as follows:

##The code is as follows:

var gradient = context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

createRadialGradient

The first three parameters are the horizontal and vertical coordinates of the center of the starting circle and the radius of the circle. The last three parameters are as follows: the center coordinates of the end point circle and the radius of the circle.

Use a circular gradient to draw a gradient starting from the center. The effect is as follows:

The code is as follows:

var gradient = context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle = gradient;
context.fillRect(50,50,100,100);

The starting point and the end point are the center of the square, and the radius can be different create this effect.

The above is the content of Html5 Canvas Preliminary Study Notes (9) - Gradient. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!