Firefox中丑陋的radialGradient。我该怎么办呢？

Question

我用画布绘制径向渐变扇区。 Chome工作正常，Firefox产生了奇怪且不一致的结果，在不同的角度有所不同。我该如何解决这个问题？

＆＃13;

＆＃13;

[[ -f ~/.bashrc ]] && . ~/.bashrc

＆＃13;

var options = {
  x0: 300,
  y0: 300,
  radius: 181,
  direction: 77,
  sight: 80
};

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function toRadians(deg) {
  return deg * Math.PI / 180;
}

function drawSector(ctx, opt) {
  ctx.beginPath();
  ctx.moveTo(options.x0, options.y0);
  ctx.arc(options.x0, options.y0, options.radius, toRadians(options.direction - options.sight / 2), toRadians(options.direction + options.sight / 2));
  ctx.lineTo(options.x0, options.y0);
  ctx.closePath();

  var grad_x0 = options.x0 + options.radius * Math.cos(toRadians(options.direction));
  var grad_y0 = options.y0 + options.radius * Math.sin(toRadians(options.direction));

  var gradient = ctx.createRadialGradient(grad_x0, grad_y0, options.radius, options.x0, options.y0, 0);
  gradient.addColorStop(0, 'white');
  gradient.addColorStop(0.8, '#2287B9FF');
  // gradient.addColorStop(1, 'rgba(92,141,255,0.2)');

  ctx.fillStyle = gradient;

  ctx.fill();
}

drawSector(ctx);

＆＃13;

＆＃13;

＆＃13;

JS小提琴：https://jsfiddle.net/Arris/s2qvsd73/

Answer 1

错误是由于将渐变的坐标从double转换为float的错误，可以通过强制径向渐变坐标为Int32s来修复

Bitwise或0将从JS Number转换为Int32（有符号整数32位）并解决问题。

var gradient = ctx.createRadialGradient(
    grad_x0 | 0, 
    grad_y0 | 0, 
    options.radius | 0, 
    options.x0 | 0, 
    options.y0 | 0, 
    0
);