如何使用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元素繪製透明圖像

回答

相關問題