Chrome v65中Canvas createRadialGradient()未按预期工作问题求助

我之前做Canvas可视化项目的时候正好踩过这个坑！当时Chrome刚更到65，突然发现页面里的径向渐变全挂了，Firefox和Safari都好好的，Opera 52也跟着出问题，查了半天才知道是WebKit/Blink内核的新Bug。

给你几个亲测有效的临时修复办法： #

• 微调渐变参数：把渐变的圆心坐标、半径这类数值改成整数，或者避免用带多位小数的数值，比如原本写x: 100.5，改成x: 100或者x: 101，大概率能绕过这个渲染异常。
• 换个渐变实现思路：如果参数调整没用，就用线性渐变叠加模拟径向渐变，或者提前用设计工具生成渐变图片，然后在Canvas里绘制图片当背景，虽然麻烦点，但能保证跨浏览器表现一致。
• 临时降级浏览器：如果是内部测试环境，降级到Chrome 64或者Opera 51能立刻解决，但生产环境肯定不建议这么搞。

补充下后续情况： #

这个Bug在Chrome 65的后续小版本更新里就被官方修复了，Opera也同步跟进了修复。所以如果现在还遇到这个问题，最省心的办法就是把浏览器更到最新稳定版，直接根治。

对了，你提到的“未关闭的……”应该是指Chrome Bug Tracker上的相关反馈Issue吧？当时有好多开发者提交了这个问题，官方处理得还挺快的。

内容的提问来源于stack exchange，提问作者Laust Deleuran