繪製PNG到畫布元素 - 不顯示透明度

我想使用drawImage在畫布元素上繪製半透明PNG。但是，它將圖像描繪爲完全不透明。當我查看正在加載的資源並在瀏覽器中加載實際的PNG時，它會顯示透明度，但是當我在畫布上繪製它時，它不會。有任何想法嗎？繪製PNG到畫布元素 - 不顯示透明度

下面的代碼：

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0);

來源

2012-01-23 pixielex

請出示一個可重複的測試案例的問題，和OS /瀏覽器/版本它在哪裏失敗。這通常工作正常。 – Phrogz

我有同樣的問題，我的html看起來像這樣[一]（http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_img）。劇本的放置位置是否重要？當你按提交它的作品，但當你重新加載頁面的圖片不會呈現 –

它應該工作正常，你確定你的形象實在是透明的，不只是白色的背景？

這裏是繪製一個透明的PNG在黑色矩形基礎代碼關的例子：

http://jsfiddle.net/5P2Ms/

來源

2012-01-23 19:49:31

如果您在渲染環描繪它，你需要確保運行context.clearRect(0, 0, width, height)首先，否則你只是在png的每一幀上寫下png，這最終是不透明的。（但是幀渲染速度很快，所以你不會用肉眼看到它）。

來源

2013-03-04 08:52:49 Stev0

不要忘記爲圖像的加載事件添加事件偵聽器。圖像加載是在後臺發生的事情，所以當JavaScript解釋器到達canvas.drawImage部分時，很可能圖像可能不會被加載，只是一個空的圖像對象，沒有內容。

drawing = new Image(); 
drawing.src = "draw.png"; // can also be a remote URL e.g. http:// 
drawing.onload = function() { 
    context.drawImage(drawing,0,0); 
};

來源

2013-03-26 14:19:24

NB，如果你是使用canvas.toDataURL和您設置的MIME類型以外的任意說gif或png，圖像的透明部分會全黑。

drawing = new Image(); 
drawing.onload = function() { 
    context.drawImage(drawing,0,0); 
    var base64 = canvas.toDataURL('image/png', 1); 
}; 
drawing.src = "draw.png";

來源

2015-01-05 11:58:58

這個代碼中實際做的變量「base64」是什麼？我沒有看到它寫在其他地方。 – VagueExplanation

@vagueexplanation製作四個。 –

可以使用Image對象只需插入任何透明的圖像：

var canvas=document.getElementById("canvas"); 
 
var context=canvas.getContext('2d'); 
 
var image=new Image(); 
 
image.onload=function(){ 
 
context.drawImage(image,0,0,canvas.width,canvas.height); 
 
}; 
 
image.src="http://www.lunapic.com/editor/premade/transparent.gif";

<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>

來源

2016-04-25 13:36:57 Mavie

繪製PNG到畫布元素 - 不顯示透明度

回答

相關問題