这是我在画布上移动径向渐变的代码。它适用于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的较旧版本做不同的样式。