HTML DOM createRadialGradient() 方法

定义和用法

createRadialGradient() 方法创建一条放射颜色渐变。

语法

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数

参数描述
xStart, yStart开始圆的圆心的坐标。
radiusStart开始圆的半径。
xEnd, yEnd结束圆的圆心的坐标。
radiusEnd结束圆的半径。

返回值

表示一个放射性颜色渐变的一个 CanvasGradient 对象

描述

这个方法创建并返回了一个新的 CanvasGradient 对象,该对象在两个指定圆的圆周之间放射性地插值颜色。注意,这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾勒线条或填充区域,只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。

放射性渐变的绘制方法

使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色,在两个位置之间的圆上插入颜色值(红色、绿色、蓝色和 alpha)。

参阅

CanvasGradient.addColorStop()

CanvasRenderingContext2D.createLinearGradient()