二维码
搜索 ×

类: Gradient

Gradient

渐变效果类

构造

new Gradient(options)

参数
名称 类型 缺省值 说明
options Object

选项{type, coords, gradientUnits, and colorStops}

Properties
名称 类型 缺省值 说明
type Object

渐变类型：linear or radial
gradientUnits Object

坐标单位：像素/百分比
colorStops Array.<Object>

colorstops参数
coords Object

gradient坐标

Properties
名称 类型 缺省值 说明
x1 Number

X coordiante of the first point for linear or of the focal point for radial
y1 Number

Y coordiante of the first point for linear or of the focal point for radial
x2 Number

X coordiante of the second point for linear or of the center point for radial
y2 Number

Y coordiante of the second point for linear or of the center point for radial
r1 Number

only for radial gradient, radius of the inner circle
r2 Number

only for radial gradient, radius of the external circle

成员

名称 说明
colorStops

由偏移值和颜色值指定的断点到渐变数组
gradientTransform

渐变的变换矩阵 在应用此变换之前，原点位于对象的左上角，加上offsetY和offsetX
gradientUnits

坐标单位. 可选值：像素、百分数 If pixels, the number of coords are in the same unit of width / height. If set as percentage the coords are still a number, but 1 means 100% of width for the X and 100% of the height for the y. It can be bigger than 1 and negative. allowed values pixels or percentage.
objTransform_

对象的变换矩阵
pixel

像素信息，与坐标信息对应，缩放操作时需将坐标变换为像素
type

Gradient type linear or radial

方法列表

名称 说明
_gradientTransform()

根据gradientTransform属性，在渲染时进行矩阵变换
addColorStop(colorStop)

Adds another colorStop
create(ctx)

创建Canvas的Gradient对象
toPixel(tool, geometry)

获取具体的像素值， 缩放时应先处理对象的坐标转换，然后处理渐变对象的坐标转换
transform(trans)

对象应用矩阵时，其关联的本渐变对象也需要进行矩阵变换； 注意：其执行顺序需在 渐变应用矩阵执行之后再来执行该变换

详细说明

_gradientTransform()

根据gradientTransform属性，在渲染时进行矩阵变换

addColorStop(colorStop)

Adds another colorStop

参数
名称 类型 缺省值 说明
colorStop Object

Object with offset and color
返回值

thisArg

Type
Gradient

create(ctx)

创建Canvas的Gradient对象

参数
名称 类型 缺省值 说明
ctx CanvasRenderingContext2D

Context to render on
返回值
Type
CanvasGradient

toPixel(tool, geometry)

获取具体的像素值， 缩放时应先处理对象的坐标转换，然后处理渐变对象的坐标转换

参数
名称 类型 缺省值 说明
tool *
geometry *

transform(trans)

对象应用矩阵时，其关联的本渐变对象也需要进行矩阵变换； 注意：其执行顺序需在 渐变应用矩阵执行之后再来执行该变换

参数
名称 类型 缺省值 说明
trans *