上下文.createConicGradient不是一个函数

Question

我是画布新手，我正在学习MDN的画布教程的颜色渐变部分，当我想运行context.createConicGradient浏览器抛出错误:

Uncaught TypeError: context。createConicGradient不是函数

我甚至从教程中复制了相同的代码，但它还是抛出了这个错误。我以为这个方法已经从JS中删除或弃用了，但是我没有找到任何可靠的方法。

下面是教程中的代码:

var conicGrad1 = ctx.createConicGradient(2, 62, 75);
conicGrad1.addColorStop(0, '#A7D30C');
conicGrad1.addColorStop(1, '#fff');

Answer 1

方法createConicGradient()是实验性的，在大多数浏览器中尚未可用。

检查下面的浏览器兼容性:

https://caniuse.com/mdn-api_canvasrenderingcontext2d_createconicgradient

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient browser_compatibility

如果你想尝试一下，你可以在Firefox中打开:

:配置

然后启用下面的属性:

canvas.createConicGradient.enabled

之后，你的代码就可以工作了。

Answer 2

这里有一个有用的填充，你可以使用:https://github.com/parksben/create-conical-gradient

import 'create-conical-gradient'; // If you use the npm package.
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createConicalGradient(240, 135, -Math.PI, Math.PI);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(0.2, '#00f');
gradient.addColorStop(0.4, '#0ff');
gradient.addColorStop(0.6, '#f0f');
gradient.addColorStop(0.8, '#ff0');
gradient.addColorStop(1, '#f00');
ctx.fillStyle = gradient.pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);