CanvasRenderingContext2D：createConicGradient() 方法

基线 2023

新功能

自 2023 年 4 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

Canvas 2D API 的 CanvasRenderingContext2D.createConicGradient() 方法在具有给定坐标的点周围创建渐变。

此方法返回一个圆锥形 CanvasGradient。要应用于形状，渐变必须首先分配给 fillStyle 或 strokeStyle 属性。

注意：渐变坐标是全局的，即相对于当前坐标空间。当应用于形状时，坐标**不**相对于形状的坐标。

语法

js
createConicGradient(startAngle, x, y)

参数

startAngle

开始渐变的角度，以弧度表示。角度从水平穿过中心向右的线开始，并顺时针方向进行。

x

渐变中心的 x 轴坐标。

y

渐变中心的 y 轴坐标。

返回值

CanvasGradient

一个圆锥形 CanvasGradient。

示例

使用圆锥形渐变填充矩形

此示例使用 createConicGradient() 方法初始化一个圆锥形渐变。然后在中心坐标周围创建五个颜色停止点。最后，渐变分配给画布上下文，并呈现为填充矩形。

HTML

html
<canvas id="canvas" width="240" height="240"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a conic gradient
// The start angle is 0
// The center position is 100, 100
const gradient = ctx.createConicGradient(0, 100, 100);

// Add five color stops
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");

// Set the fill style and draw a rectangle
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);

矩形结果

规范

规范
HTML 标准
# dom-context-2d-createconicgradient-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅