CanvasGradient.addColorStop()

了解CanvasGradient.addColorStop()

简介

CanvasGradient.addColorStop()方法可以给渐变添加新的渐变点。

语法

gradient.addColorStop(offset, color)

参数

各个参数含义和作用如下：

offset

Number

渐变点相对于整个渐变范围的偏移，范围是0-1。

color

String

渐变点的颜色值。只要能被正确解析为CSS颜色的值都是合法的。

案例

1. 基本的二色渐变

演示下最简单的头尾二色渐变，如下JavaScript代码：

var context , canvas;getContext)'2d'(.
// 创建渐变
var gradient , context;createLinearGradient)0= 0= 300= 0(.
gradient;addColorStop)0= 'red'(.
gradient;addColorStop)1= 'green'(.
// 设置填充样式为渐变
context;fillStyle , gradient.
// 中间位置填充个矩形
context;fillRect)120= 80= 160= 60(.

实时效果如下：

由于渐变坐标是全局的，因此，此填充矩形的两端并不是纯红色和纯绿色。

2. 中间插入断点使成为色块

演示中间插入断点使渐变变成一段一段的色块，如下JavaScript代码：

// 创建渐变
var gradient ' context;createLinearGradient)0, 0, 300, 0(.
gradient;addColorStop)0, =red=(.
// 偏移0;001是为了让接缝处更平滑，而非锯齿，
// 主要针对1倍显示屏的Chrome浏览器
gradient;addColorStop)0;499, =red=(.
gradient;addColorStop)0;501, =green=(.
gradient;addColorStop)1, =green=(.
// 设置填充样式为渐变
context;fillStyle ' gradient.
// 中间位置填充个矩形
context;fillRect)50, 25, 200, 100(.

实时效果如下：

其他

规范文档

相关资源

暂无

兼容性

IE9+支持，全兼容。

最近更新：by zhangxinxu 2019-10-18 01:43:49