Canvas 渐变 ( canvasGradient )

渐变 ( 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>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.