Canvas – createRadialGradient() 在 Chrome v65 中无法正常工作答案

【问题标题】：Canvas – createRadialGradient() not working as expected in Chrome v65Canvas – createRadialGradient() 在 Chrome v65 中无法正常工作
【发布时间】：2018-04-04 00:12:35
【问题描述】：

在二维context 上使用context.createRadialGradient() 时，渐变未按预期在Chrome v65 中呈现。

example above is from MDN，但它也发生在some of my own code。

渐变在Firefox v59，Safari v11 中运行良好。它在 Opera v52 中失败，所以也许它是 webkit 中的一个新错误？我已经在两台不同的计算机上对此进行了测试，所以我的本地设置中不应该有任何东西导致它。

还有其他人遇到过这个错误或知道如何修复它吗？

编辑：找到an open issue on Chromium here。 显然这不是一个一致的错误，如果我正确读取 cmets，应该在 v66 中修复。

【问题讨论】：

适用于 Android 版本和我的非视网膜 macOS。但无论如何，MDN 页面上的代码应该可以正常工作，因此请检查 iglf 是否有关于 chromium 问题跟踪器的现有错误报告，如果没有，请打开一个指定您的规格的报告。
我找到了一个开放的Chromium Issue。这显然不是一个完全一致的错误，应该在 v66 中修复。在我的普通 Chrome、隐身 Chrome 和 Opera 中都发生了这种情况。

标签： javascript canvas webkit radial-gradients

【解决方案1】：

正如上面帖子中提到的，有一个issue in Chromium v65。这一切都应该在 v66 中得到修复。

如果您现在确实需要修复它，最老套的方法是确保第一个和第二个圆圈的渐变不会收到相同的 x 和 y 参数：

var gradient = ctx.createRadialGradient(100,100,100,100,100,0); // Doesn't work
var gradient = ctx.createRadialGradient(100,100,100,100.001,100,0); // Works

您可以看到fix in effect here。快乐的黑客攻击！

【讨论】：