Canvas 渐变 ( canvasGradient ) - Canvas 基础教程

渐变 ( gradients ) 可以在两个或多个指定的颜色之间显示平稳的过渡

就好像 Photoshop 一样，我们可以用线性或者径向的渐变来填充或描边

Canvas 中的渐变是一个 CanvasGradient 对象

CanvasGradient 对象

CanvasGradient 用于描述一个渐变，可以是线性渐变或者放射渐变

它没有任何属性，也没有构造函数，只有一个方法 addColorStop() 用于增减一个渐变点

CanvasGradient.addColorStop()

addColorStop 用于添加一个由偏移 ( offset )和颜色( color )定义的色标 ( color stops) 到渐变中

如果偏移值不在 0 到 1 之间，将抛出 INDEX_SIZE_ERR错误

如果颜色值不能被解析为有效的 CSS 颜色值，将抛出 SYNTAX_ERR 错误

语法

void gradient.addColorStop(offset, color);

参数	说明
offset	0 到 1 之间的值
color	CSS颜色值

创建渐变的方法

Canvas 提供了两个方法用于创建渐变对象

方法	说明
createLinearGradient(x1, y1, x2, y2)	线性渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)	放射渐变

有了渐变对象后，我们就可以把它赋值给 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>

运行结果如下