javascript - 适用于 Android 28 的 Chrome：HTML Canvas RadialGradient 渲染不正确

Question

Chrome 版本：28.0.`500.94 操作系统 Android：4.1.1

径向梯度功能无法正常工作。

var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
rad.addColorStop(0, "#000000");
rad.addColorStop(1, "#FFFFFF");
ctx.fillStyle = rad;
ctx.arc(x, y, r, 0, Math.PI*2, false);
ctx.fill();

结果是一个实心圆圈。Android 上的其他浏览器（以及 Chrome 桌面版）可以正确呈现它。

例子：

http://fiddle.jshell.net/eDnQL/2/show/

有人认识这个吗？

Answer 1

不知道这是否能解决您的问题，但我在 Android 设备上的 Chrome 34 上使用 createRadialGradient 时也遇到了问题。

对我来说，它只有在第三个参数（内圆半径）为 0 时才能正常工作。

// Notice the third argument (start circle radius) MUST be 0 
// for createRadialGradient to work correctly on Chrome Android
var gradient = ctx.createRadialGradient(x1, y1, 0, x2, y2, r2);