javascript - 为什么图像样式不透明度没有改变 Canvas 中的图像对象？

Question

这个问题已经有答案了:

JavaScript Canvas - change the opacity of image (2 个回答)

已关闭 7 年前。

我正在制作一个首先加载 Canvas ，然后加载所有图像的游戏，但是当我尝试使用“img.style.opacity = 0.5;”时，我遇到了每个图像的不透明度问题。图像没有任何变化...这是代码的一部分:

     imageObj.src = "table.jpg";
    var tequila = new Image();
        tequila.src = "tequila.png";
        tequila.style.opacity = 0.5;
       wisky.onload = function(){
          context.drawImage(tequila, 180, 319);

        };


  }

Answer 1

drawImage 绘制您指定的图像，并且不查找应用于该图像的任何样式。

但是， Canvas 的上下文有一个名为 globalAlpha 的属性(请参阅 https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-globalalpha )，因此您可以在绘制图像之前将其设置为 0.5 并重置之后就可以了。