An example of the fading function of canvas in HTML5

Canvas supports linear gradient fills, and radioactive gradient fills. At the same time, both of these gradient forms support multiple color blends.

1, linear gradient

(1) to create a linear gradient, we need to pass the createlineargradient () to the two coordinate points, respectively, indicating the beginning and end of the gradient. The starting and ending points form the interval of gradual color transition.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Border line width
Context.linewidth = 2;
Border Line Color
Context.strokestyle = "#c0c0c0";
Draw Path
Context.moveto (200, 50);
Context.lineto (100, 150);
Context.lineto (300,150);
Context.closepath ();

Create a gradient from (150,0) to (250,0)
var gradient = context.createlineargradient (150, 0, 250, 0);
Add two colors
Gradient.addcolorstop (0, "magenta");
Gradient.addcolorstop (1, "yellow");

Fill Fade Color
Context.fillstyle = gradient;
Context.fill ();
Context.stroke ();

(2) To set the gradient color, you need to use the Addcolorstop () method of the Gradient object. Call this method, in addition to providing a color value (color name), you also need to provide a 0~1 offset value. 0 indicates the starting point of the gradient, and 1 is at the end of the gradient.
By calling the Addcolorstop () method multiple times, we can create gradients that are composed of various colors.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Border line width
Context.linewidth = 2;
Border Line Color
Context.strokestyle = "#c0c0c0";
Draw Path
Context.moveto (200, 50);
Context.lineto (100, 150);
Context.lineto (300,150);
Context.closepath ();

Create a gradient from (150,0) to (250,0)
var gradient = context.createlineargradient (150, 0, 250, 0);
Add multiple Colors
Gradient.addcolorstop (0, "magenta");
Gradient.addcolorstop (0.25, "blue");
Gradient.addcolorstop (0.5, "green");
Gradient.addcolorstop (0.75, "yellow");
Gradient.addcolorstop (1, "red");

Fill Fade Color
Context.fillstyle = gradient;
Context.fill ();
Context.stroke ();

2, radioactive gradient

(1) To create a radioactive gradient, I need to specify two circles using Createradialgradient (). Because a radioactive gradient is a color that transitions from a small circle to a larger circle that contains it.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Border line width
Context.linewidth = 2;
Border Line Color
Context.strokestyle = "#c0c0c0";
Draw Path
Context.moveto (200, 50);
Context.lineto (100, 150);
Context.lineto (300,150);
Context.closepath ();

The gradient starting point is a circle with coordinates (200,100) and a radius of 10. The end point is the same center coordinate, a circle with a radius of 50
var gradient = context.createradialgradient (200, 100, 10, 200, 100, 50);
Add two colors
Gradient.addcolorstop (0, "magenta");
Gradient.addcolorstop (1, "yellow");

Fill Fade Color
Context.fillstyle = gradient;
Context.fill ();
Context.stroke ();

(2) also through multiple calls to the Addcolorstop () method, you can achieve a multiple-color radioactive gradient effect.

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");

Border line width
Context.linewidth = 2;
Border Line Color
Context.strokestyle = "#c0c0c0";
Draw Path
Context.moveto (200, 50);
Context.lineto (100, 150);
Context.lineto (300,150);
Context.closepath ();

The gradient starting point is a circle with coordinates (200,100) and a radius of 10. The end point is the same center coordinate, a circle with a radius of 50
var gradient = context.createradialgradient (200, 100, 10, 200, 100, 50);
Add multiple Colors
Gradient.addcolorstop (0, "magenta");
Gradient.addcolorstop (0.25, "blue");
Gradient.addcolorstop (0.5, "green");
Gradient.addcolorstop (0.75, "yellow");
Gradient.addcolorstop (1, "red");

Fill Fade Color
Context.fillstyle = gradient;
Context.fill ();
Context.stroke ();

The FillStyle and Strokestyle properties can be set to the Canvasgradient object

There are two ways to create a Canvasgradient object: Createlineargradient and Createradialgradient

Grd=context.createlineargradient (Startx,starty,endx,endy);

Grd.addcolorstop (Offset,color);

Grd=context.createradialgradient (Startx,starty,endx,endy);

Grd.addcolorstop (Offset,color);

Addcolorstop () method to add a color middle value

Example:

<!doctype html>
<meta charset= "Utf-8"/>
<title>canvas createlineargradient</title>
<script>
Window.onload=function () {
var canvas=document.getelementbyidx_x ("MyCanvas");
var Context=canvas.getcontext ("2d");

Context.beginpath ();
Context.moveto (170,80);
Context.beziercurveto (130,100,130,150,230,150);
Context.beziercurveto (250,180,320,180,340,150);
Context.beziercurveto (420,150,420,120,390,100);
Context.beziercurveto (430,40,370,20,340,50);
Context.beziercurveto (320,5,250,20,250,50);
Context.beziercurveto (200,5,150,20,170,80);
Context.closepath ();
var grd = context.createlineargradient (230,0,370,200);
Grd.addcolorstop (0, "#8ed6ff");
Grd.addcolorstop (1, "#004cb3");
CONTEXT.FILLSTYLE=GRD;
Context.fill ();

context.linewidth=5;
Context.strokestyle= "#0000ff";
Context.stroke ();

}
</script>
<body>
<canvas id= "MyCanvas" width= "height=" ></canvas>
</body>