Question

这是我在画布上移动径向渐变的代码。它适用于Chrome和Firefox，但不适用于Firefox。我还想要一个IE的后备选项 - 实际上无法在Mac上轻松测试它，但我认为如果它是一个旧的IE则不会。对于IE，通过没有alpha通道渐变的图像可以做到。有什么想法吗？

  var cirRadius = 300;

  var posX = 100; 
  var posY = 100;
  var RGB = [11,11,11] ; 
  var alphas = [0,0,0.1,0.5,1];

  var update = function(){
      if(ctx){  
          if(image.complete){ 
              ctx.drawImage(image,0,0,canvas.width,canvas.height)
          }else{ 
              ctx.clearRect(0,0,canvas.width,canvas.height);
          }
          var grad = ctx.createRadialGradient(posX,posY,0,posX,posY,cirRadius);
          var len = alphas.length-1;
          alphas.forEach((a,i) => {
               grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
          });
          ctx.fillStyle = grad;
          ctx.fillRect(0,0,canvas.width,canvas.height);
      }
      requestAnimationFrame(update);
  }

Answer 1

事实证明，Safari无法识别forEach循环中的快捷方式，因此我只需更改此内容：

alphas.forEach((a,i) => {
    grad.addColorStop(i/len,`rgba(${RGB[0]},${RGB[1]},${RGB[2]},${a})`);
});

到此：

alphas.forEach(function (a,i) {
    grad.addColorStop(i/len,`rgba( ${RGB[0]}, ${RGB[1]}, ${RGB[2]}, ${a})`);
});

它适用于最新的IE浏览器，但我想我可以为旧版本的IE做一个不同的风格。

带有rgba的画布径向渐变不适用于Safari＆amp; IE

1 个答案: