Canvas Gradients
Canvas Gradients （画布渐变）
A gradient, in general, is a pattern of colors that changes from one color to another. HTML5 Canvas gradients are patterns of color used to fill circles, rectangles, lines, text, and so on, and the canvas shapes aren’t limited to solid colors. （一般来说，渐变是一种从一种颜色变化到另一种颜色的图案。HTML5画布渐变是用于填充圆形、矩形、线条、文本等的颜色模式，画布形状不限于纯色。）
There are two types of gradients:
createLinearGradient(x,y,x1,y1) - for creating a linear gradient （- createLinearGradient (x, y, x1, y1) -用于创建线性渐变）
createRadialGradient(x,y,r,x1,y1,r1) - for creating a radial gradient （- createRadialGradient (x, y, r, x1, y1, r1) -用于创建径向渐变）
Once you have a gradient object, add two or more color stops. To specify the color stops and the position along the gradient, the addColorStop() method is used. Gradient positions can be in the range between 0 and 1. （有了渐变对象后，请添加两个或多个色调。要指定颜色停止和沿渐变的位置，请使用addColorStop ()方法。渐变位置可以在0到1之间的范围内。）
Then set the fillStyle or strokeStyle property to the gradient and draw the shape. （然后将fillStyle或strokeStyle属性设置为渐变并绘制形状。）
Linear Gradient
Linear Gradient （线性渐变）
The linear gradient changes the color in a linear pattern defining the direction of the gradient (horizontal, vertical, or diagonal). The four parameters of this function (x,y,x1,y1) define the direction and extension of the gradient. （线性渐变以线性图案更改颜色，该线性图案定义了渐变的方向（水平、垂直或对角线）。此函数的四个参数（ x、y、x1、y1 ）定义了梯度的方向和扩展。）
Example of a linear gradient using the fillStyle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 1px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "green");
grd.addColorStop(1, "whitesmoke");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 260, 110);
</script>
</body>
</html>
Example of a linear gradient using the fillStyle with different colors:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #202131;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('exampleCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, 500, 200);
var linear = context.createLinearGradient(0, 0, 500, 200);
linear.addColorStop(0, '#297979');
linear.addColorStop(1, '#2ee035');
context.fillStyle = linear;
context.fill();
</script>
</body>
</html>
Example of a linear gradient using the fillStyle and strokeStyle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 5px solid #cccccc;
}
</style>
<script>
function drawShape() {
var canvas = document.getElementById('canvasGradient');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var lgrad1 = ctx.createLinearGradient(0, 0, 0, 300);
lgrad1.addColorStop(0, 'blue');
lgrad1.addColorStop(0.4, 'lightpink');
lgrad1.addColorStop(0.5, 'purple');
lgrad1.addColorStop(1, 'lightsalmon');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 150);
lgrad2.addColorStop(0, '#7afff3');
lgrad2.addColorStop(0.5, '#191918');
lgrad2.addColorStop(1, '#7afff3');
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
ctx.fillRect(15, 15, 120, 120);
ctx.strokeRect(100, 50, 100, 50);
} else {
alert('Your browser does not support');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient"></canvas>
</body>
</html>
Radial Gradient
Radial Gradient （射线型渐变）
The radial gradient changes the color in a circular pattern. It can be created with two specified circles. In other words, the radial gradient is a color pattern extending circularly, from an inner color to one or more other colors. This can be done with two circles, each of which must have a center point and a radius. （径向渐变以圆形图案更改颜色。它可以用两个指定的圆来创建。换句话说，径向渐变是从内部颜色圆形延伸到一种或多种其他颜色的颜色图案。这可以通过两个圆来完成，每个圆都必须有一个中心点和一个半径。）
Example of a radial gradient:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
canvas {
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="150">
Your browser doesn't support the HTML5 canvas tag.
（您的浏览器不支持HTML5画布标签。）
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(155, 80, 20, 130, 40, 190);
grd.addColorStop(0, "#14389c");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(15, 15, 270, 120);
</script>
</body>
</html>