Question

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

     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

看看这个enter link description here并将图片放入相关的div容器中。

编辑：真的，两个downvotes给你准确的答案？：S

仅供参考：据我所知，Canvas中的不透明度由globalAlpha值控制。

编辑2：已经回答here

您必须更改globalAlpha或将图片绘制为   设置了globalAlpha的离屏画布，然后绘制此画布   在主画布上。

只需设置alpha，绘制图像并将alpha重置为完全不透明度。   设置alpha不会更改已经绘制到的内容   画布 - 它只适用于下一个绘制的东西（这将是   在这种情况下的图像）。

当然，您始终可以使用Alpha通道准备图像   PNG图像的情况。

欢呼下议院：）

Answer 2

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

然而，画布＆＃39; context有一个名为globalAlpha的属性（请参阅https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-globalalpha），因此您可以在绘制图像之前将其设置为0.5，然后重置它。

为什么图像样式不透明度不会改变画布中的图像对象？

2 个答案: