Canvas fill gradient

Canvas The gradient of can be filled in the rectangle , circular , line , Text, etc. , Various shapes can define their own colors .

Be careful ： You must use two or more colors to use gradients .

Canvas There are two ways to gradient ：

1. linear The gradient createLinearGradient(x1, y1, x2, y2)
   x1、y1 Coordinates representing the starting point of the gradient
   x2、y2 Represents the coordinates of the end point of the gradient
   notes ： The direction of the gradient is from x1y1 To x2y2, If y identical , That is the gradient from left to right , If x identical , It's a gradient from top to bottom , Gradient obliquely requires you to adjust the coordinates of the two positions

2. Radial / round The gradient createRadialGradient(x1, y1, r1, x2, y2, r2)
   x1、y1 Represents the coordinates of the center of the gradient start circle ,r1 Represents the radius of the center of the gradient start circle
   x2、y2 Represents the coordinates of the center of the circle at the end of the gradient ,r2 Indicates the radius of the circle at the end of the gradient .
   notes ： When the center coordinates of the starting circle and the ending circle are the same , There will be a circular gradient effect

Canvas How to add color （ Specify stop color ）：addColorStop(value, color)
value： Coordinates to describe the position of the gradient , Value 0~1（ It can be understood that the whole gradient is 0-100% The location of , So as to set the color at the percentage position ）
color： The color at the end of the gradient （ Stop color ）

Example ：

Linear gradient ：

// myCanvas  yes canvas Labeled ID
var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  let grad = ctx.createLinearGradient(0, 150, 200, 150);	//  Create a gradient linear object 
  grad.addColorStop(0, "rgba(240,250,40,1)");	//  Set gradient color 
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad;	//  Set up fillStyle For the current gradient object 
  ctx.fillRect(0, 0, 400, 400);	//  Draw gradient graphics 
}

Radial / Circle gradient

var canvas = document.getElementById("myCanvas");
if (canvas && canvas.getContext) {
    
  let ctx = canvas.getContext("2d");
  let grad = ctx.createRadialGradient(200, 200, 50, 260, 260, 200) //  Create a gradient radial / Circular object 
  // let grad = ctx.createRadialGradient(200, 200, 50, 200, 200, 200) //  Circular gradient effect 
  grad.addColorStop(0, "rgba(240,250,40,1)"); //  Set gradient color 
  grad.addColorStop(0.25, "rgba(327,201,64,1)");
  grad.addColorStop(0.5, "rgba(22,184,200,1)");
  grad.addColorStop(1, "rgba(82,67,192,1)");
  ctx.fillStyle = grad; //  Set up fillStyle For the current gradient object 
  ctx.fillRect(0, 0, 500, 500); //  Draw gradient graphics 
}