线性渐变

线性渐变指的是一条直线进行的渐变。在页面中，大多数渐变效果都是线性渐变。在canvas中，我们可以将createLinearGradient()和addColorStop()这两个方法配合来实现线性渐变。

语法:

let gnt = cxt.createLinearGradient(x1,y1,x2,y2);
gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
cxt.fillStyle = gnt;
cxt.fill();

说明：

在canvas中，创建线性渐变需要三个步骤：

调用createLinearGradient()方法创建一个linearGradient对象，并赋值给变量gnt。参数x1,y1代表渐变色开始坐标，x2,y2代表渐变色结束坐标。
调用linearGradient对象的addColorStop()方法，可以调用N次，第一次表示渐变开始的颜色，第二次表示渐变结束的颜色。第三次以第二次的颜色为开始颜色，以此类推。参数value,color分别代表渐变位置的偏移量（取值在0~1之间）和渐变颜色。
把linearGradient对象赋值给fillStyle属性，并调用fill()方法来绘制有关图形。在线性渐变中，fill()可以改为fillRect()或者fillText()，以实现矩形渐变或者文字渐变。

预备代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id = "canvas" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
    }
</script>
</html>

效果图如下：

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

let gnt = cxt.createLinearGradient(100,100,100,180);
gnt.addColorStop(0,'yellow');
gnt.addColorStop(1,'green');
cxt.fillStyle = gnt;
cxt.fillRect(100,100,80,80);
         
let text = "笨笨狗吞噬者";
cxt.font = "bold 20px 微软雅黑";
let gnt2 = cxt.createLinearGradient(0,75,100,75);
gnt2.addColorStop(0,'pink');
gnt2.addColorStop(1,'blue');
cxt.fillStyle = gnt2;
cxt.fillText(text,0,75);

效果图如下：

径向渐变

径向渐变，是一种从起点到终点、颜色由内到外的圆形渐变。径向渐变颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。在canvas中，我们可以将createRadialGradient()和addColorStop()这两个方法配合来实现径向渐变。

语法：

let gnt = cxt.createRadialGradient(x1,y1,r1,x2,y2,R2);
gnt.addColorStop(value1,color1);
gnt.addColorStop(value2,color2);
cxt.fillStyle = gnt;
cxt.fill();

let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.beginPath();
cxt.arc(120,120,40,0,2 * Math.PI);
cxt.closePath();

let gnt = cxt.createRadialGradient(100,110,10,120,120,40);
gnt.addColorStop(0,'pink');
gnt.addColorStop(0.5,'blue');
gnt.addColorStop(1,'green');
cxt.fillStyle = gnt;
cxt.fill();

效果图如下：

阴影

canvas阴影属性表

属性	说明
shadowOffsetX	阴影与图形的水平距离，默认为0。大于0向右偏移，小于0向左偏移
shadowOffsetY	阴影与图形的垂直距离，默认为0。大于0向下偏移，小于0向上偏移
shadow	阴影的颜色，默认为黑色
shadowBlur	阴影的模糊值，默认为0。该值越大，模糊度越强

 let canvas = document.getElementById('canvas');
 let cxt = canvas.getContext('2d');

 cxt.beginPath();
 cxt.arc(120,120,40,0,2 * Math.PI);
 cxt.closePath();
         
 cxt.shadowOffsetX = 5;
 cxt.shadowOffsetY = 5;
 cxt.shadowColor = 'blue';
 cxt.shadowBlur = 10;
 cxt.fillStyle = "red";
 cxt.fill();

效果图如下：

如果想实现四个方向的阴影效果，需要将shadowOffsetX和shadowOffsetY同时设置为0

cxt.shadowOffsetX = 0;
cxt.shadowOffsetY = 0;

封面制作网站 ColorFu
文章内容参考莫振杰著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！

canvas学习--渐变与阴影

线性渐变

径向渐变

阴影