这是我在画布上移动径向渐变的代码。它适用于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);
  }

最佳答案

事实证明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的较旧版本做不同的样式。

09-11 00:18
查看更多