Canvas 线性渐变 ( LinearGradient )

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

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

createLinearGradient()

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

语法

CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
参数 说明
x0 起点的 x 轴坐标
y0 起点的 y 轴坐标
x1 终点的 x 轴坐标
y1 终点的 y 轴坐标

线性渐变的使用方法

  1. 使用 createLinearGradient() 方法创建一个指定了开始和结束点的 CanvasGradient 对象

  2. 创建成功后,可以使用 CanvasGradient.addColorStop()方法添加起始色标

  3. 然后把渐变对象赋值给 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.