Canvas - createRadialGradient（）在Chrome v65中无法正常工作

Question

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

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

渐变在Firefox v59，Safari v11中正常工作。它在Opera v52中失败了，所以也许它是webkit中的一个新bug？我已在两台不同的计算机上对此进行了测试，因此不应该在我的本地设置中进行任何操作。

是否有其他人遇到此错误或更好地知道如何解决？

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

Answer 1

正如上面的帖子所提到的那样，issue in Chromium v65。它应该都在v66中修复。

如果你现在确实需要修复它，那么hacky方法是确保渐变不会为第一个和第二个圆圈接收相同的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。快乐的黑客！