Canvas 线性渐变 ( LinearGradient ) - Canvas 基础教程

线性渐变 ( LinearGradient ) 就是从一个颜色值直线性的渐变到另一个颜色值

Canvas 使用 createLinearGradient() 方法创建一个线性渐变

createLinearGradient()

createLinearGradient() 创建一个沿参数坐标指定的直线的渐变，并返回一个渐变 CanvasGradient 对象

语法

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);

参数	说明
x0	起点的 x 轴坐标
y0	起点的 y 轴坐标
x1	终点的 x 轴坐标
y1	终点的 y 轴坐标

线性渐变的使用方法

使用 createLinearGradient() 方法创建一个指定了开始和结束点的 CanvasGradient 对象
创建成功后，可以使用 CanvasGradient.addColorStop()方法添加起始色标
然后把渐变对象赋值给 strokeStyle 或者 fillStyle 属性

范例

使用 createLinearGradient() 创建一个线性渐变

<!DOCTYPE html>
<meta charset="utf-8"> 
<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>

<div style="border:1px solid #ccc">
<canvas id="canvas-1" width="400" height="200">
</canvas>
</div>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.lineWidth = 8
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"blue");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);
</script>

运行结果如下