如何使用html5 canvas元素绘制透明图像

我针对的是谷歌浏览器。是否可以在画布上绘制透明图像？透明我的意思是绘制整个图像像50％的不透明度。如何使用html5 canvas元素绘制透明图像

2010-05-26 Mr Bell

您是否希望画布透明以便可以将其放在其他元素上？ – Justin 2010-05-26 21:28:09

不，这是不可能的。看到这个答案：http://stackoverflow.com/questions/2359537/how-to-change-the-opacity-alpha-transparency-of-an-element-in-a-canvas-element – Intelekshual 2010-05-26 21:42:31

贾斯汀，不，我想在其他画布元素上绘制半透明图像。我没有兴趣让整个画布变得透明。 Intelekshual，在Chrome中至少设置context.globalAlpha效果后续context.drawImages。 – 2010-05-26 22:34:37

canvas元素具有全局alpha属性，可以让您将任何绘制的部分透明度应用。

来源

2010-05-26 21:27:45

至少在铬版本4.1.249.1045中起作用。 – 2010-05-26 22:31:24

@Mr。贝尔：为Chrome而+1。 – 2010-05-26 22:45:49

这对我有用。 +1 – dariopy 2011-11-21 19:43:50

如果您迭代通过画布的图像数据并手动设置alpha值，然后使用canvas.toDataURL方法导出透明图像并将其插入到另一个画布中，则可能会出现这种情况。

来源

2011-03-27 23:36:18

如果您想在另一个画布上绘制画布，则不必调用toDataURL，'drawImage'将画布作为imageSource接受。 – Kaiido 2016-07-09 23:27:04

您可以使用globalAlpha的财产，这样做：

<!DOCTYPE HTML> 
<html> 
    <body> 
     <canvas height="100" width="100" id="myCanvas"></canvas> 
     <script> 
      var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 
      context.globalAlpha = 0.5; 
      var myImage = new Image(); 
      myImage.src = "someImage.jpg"; 
      myImage.onload = function() 
      { 
       context.drawImage(myImage, 0, 0, 100, 100); 
      }; 
     </script> 
    </body> 
</html>

是的，它确实与图像工作。在Win 7上使用IE 9，FF 5，Safari 5和Chrome 12进行验证。

来源

2011-06-21 16:26:38

在Firefox 30+中，'globalAlpha'不适用于使用'drawImage'绘制的图像：https://bugzilla.mozilla.org/show_bug.cgi?id=1028288 – 2014-10-08 06:57:32

@Derek，此错误仅涉及svg图像。 – Kaiido 2016-07-09 23:25:48

如何使用html5 canvas元素绘制透明图像

回答

相关问题