The second use case of fillStyle is gradient filling. Gradient colors are divided into linear gradient colors and radial gradient colors.
Linear gradient: roughly divided into two steps. Two new functions of canvas will be used here.
Step 1: Use a new function createLinearGradient(xstart,ystart,xend,yend);var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
It has four parameters. They are respectively, xstart, ystart, xend, and yend, which form two coordinates, and these two coordinates form a line segment. This line segment is actually a gradient line. Gradient lines are used to define the direction and scale of the gradient.
The second step: Add colorStop based on this gradient line. This method is called addColorStop(stop, color). It has two parameters: stop and color. The first parameter is a floating point value used to determine the position of the key color. The second parameter is used to determine the color of the key color. linearGrad.addColorStop(stop,color);
After completing these two steps, the linearGrad variable can be passed into this attribute as fillStyle.
Look at the code:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Linear gradient</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); canvas.width = 800 ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //Get the context drawing environment var linearGrad = context.createLinearGradient(0, 0, 800, 600); //The starting coordinate of the gradient line is (0,0) and the ending coordinate is (800,600) linearGrad.addColorStop(0.0, '#000'); //The first one The parameter represents the position of the key color. 0 represents the starting position, 1 represents the end position, and the second parameter represents the color of the key color. linearGrad.addColorStop(1.0, '#fff'); context.fillStyle = linearGrad; context.fillRect(0, 0, 800, 600); } else { alert('Your browser does not support canvas, please try changing the browser ~') } }</script>Rendering:
After we create the linearGrad variable, we can addColorStop and add many.
For example:
Code:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //The starting coordinate of the gradient line is (0,0) and the ending coordinate is (800,600) linearGrad.addColorStop(0.0, '#fff'); linearGrad. addColorStop(0.25, '#FB3'); linearGrad.addColorStop(0.5, '#690'); linearGrad.addColorStop(0.75, '#09C'); linearGrad.addColorStop(1.0, '#000');
Rendering:
Also, the gradient line we defined is slanted, and we can also define it as horizontal or vertical. We only need to modify the ending coordinates of the gradient line. Look at the code to make a horizontal gradient:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Rendering:
Vertical gradient color:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
Rendering:
No matter whether it is tilted horizontally or vertically, what we do runs through the entire canvas. So what will be the effect if our gradient line is only assigned to a part of the canvas? Let's modify it
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
Rendering:
In the same way, the gradient line we create can also exceed the maximum width and height of this canvas. Let's modify it
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Rendering:
Also, the filled shapes we draw may not necessarily occupy the entire canvas. We can adjust the shape we define arbitrarily. This filled shape will find the appropriate fill color on the gradient line we defined and fill it out. For example:
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Rendering:
Radial gradient: The difference from linear gradient is that radial gradient defines a radial gradient. This radial gradient is defined on the basis of two concentric circles. Unlike a linear gradient which is defined between two points.
Radial gradients also require two steps to complete.
Step 1: Use a new function createRadialGradient(x0,y0,r0,x1,y1,r1); he has 6 parameters. The first three parameters define the coordinates and radius of the first ring, and the last three parameters define the coordinates and radius of the second ring. The entire radial gradient occurs between these two circles. var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Step 2: It is the same as linear gradient, so I won’t introduce it in detail. radialGrad.addColorStop(stop,color);
The code is very similar to the code for linear gradients. It’s just that createRadialGradient is used here. We pass in the parameters createRadialGradient(300,300,0,300,300,500). The first three parameters define a point with a radius of 0 in the center of the canvas. The last three parameters define a large circle with a radius of 500 in the center of the canvas. This defines a radial gradient radiating outward from a point. Take a look at the code
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Radial gradient</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas); canvas.width = 600 ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); radialGrad.addColorStop(0.5, '#690 '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect(0, 0, 600, 600); } else { alert('You Your browser does not support canvas, please try changing your browser~') } }</script>Rendering:
You can try changing the parameters to see what different effects there will be.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.