HTML5 Canvas – 创建渐变

HTML5 Canvas 是一个强大的工具，可以通过它实现很多酷炫的效果。在 Canvas 中，通过创建渐变可以制作出更为丰富多彩的效果。本文将介绍如何使用 HTML5 Canvas 创建渐变效果。

线性渐变

线性渐变是最基本的渐变效果，在 Canvas 中可以通过 createLinearGradient() 方法来创建。createLinearGradient() 方法需要设置两个点，渐变将会在这两个点之间进行。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 500, 0); // 从左到右
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);

上述代码实现了一个从左到右的线性渐变，渐变开始为蓝色，中间为绿色，结束为红色。

径向渐变

与线性渐变相似，径向渐变也是通过 createRadialGradient() 方法来创建。与线性渐变不同的是，径向渐变需要设置两个圆形的中心点和半径，渐变将会在这两个圆形之间进行。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createRadialGradient(250, 250, 0, 250, 250, 250);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);

上述代码实现了一个从中心向四周的径向渐变，渐变开始为蓝色，中间为绿色，结束为红色。

Canvas 渐变样式

在 Canvas 中，我们还可以设置线条或填充的渐变样式。通过 createLinearGradient() 或 createRadialGradient() 方法创建的渐变对象同样可以用于设置 Canvas 的样式。

设置线条渐变样式

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'red');
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(0, 250);
ctx.lineTo(500, 250);
ctx.stroke();

上述代码实现了一条从左到右的渐变线条，线条开始为蓝色，中间为绿色，结束为红色。

设置填充渐变样式

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createRadialGradient(250, 250, 0, 250, 250, 250);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 500);

上述代码实现了一个从中心向四周的径向填充渐变，填充开始为蓝色，中间为绿色，结束为红色。

结论

通过本文的介绍，我们了解了如何在 HTML5 Canvas 中创建渐变效果。我们可以通过 createLinearGradient() 和 createRadialGradient() 方法来创建渐变，还可以将渐变用于设置 Canvas 的线条或填充样式。渐变效果的应用可以让我们制作出更为绚丽的 Canvas 图形。