Vẽ PNG thành phần tử canvas - không hiển thị độ trong suốt

Question

Tôi đang cố gắng sử dụng drawImage để vẽ PNG bán trong suốt trên phần tử canvas. Tuy nhiên, nó vẽ hình ảnh hoàn toàn mờ đục. Khi tôi xem tài nguyên đang được tải và tải PNG thực tế trong trình duyệt, nó hiển thị độ trong suốt, nhưng khi tôi vẽ nó trên canvas, nó không. Bất kỳ ý tưởng?

Dưới đây là các mã:

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

Answer 1

Nó phải hoạt động tốt, bạn có chắc hình ảnh của bạn là thực sự trong suốt và không chỉ trắng trong nền?

Dưới đây là một ví dụ về cách vẽ một PNG trong suốt hơn một hình chữ nhật màu đen để căn mã của bạn tắt của:

http://jsfiddle.net/5P2Ms/

Answer 2

Nếu bạn đang vẽ nó trong một render vòng lặp, bạn cần phải chắc chắn để chạy context.clearRect(0, 0, width, height) đầu tiên, nếu không bạn chỉ cần viết png trên png mọi khung hình, mà cuối cùng sẽ mờ đục. (Nhưng khung hình hiển thị nhanh, vì vậy bạn sẽ không nhìn thấy điều này bằng mắt thường.)

Answer 3

Đừng quên thêm trình xử lý sự kiện vào sự kiện tải của hình ảnh. Tải hình ảnh là điều xảy ra ở chế độ nền, vì vậy khi trình thông dịch JavaScript vào phần canvas.drawImage, rất có thể hình ảnh đó có thể chưa tải và chỉ là một đối tượng hình ảnh trống, không có nội dung.

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

Answer 4

NB, nếu bạn đã sử dụng canvas.toDataURL và bạn thiết lập các Mimetype để bất cứ điều gì khác hơn là nói gif hoặc png, các bộ phận trong suốt của hình ảnh sẽ được hoàn toàn đen.

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

Answer 5

Bạn chỉ có thể chèn bất kỳ hình ảnh minh bạch sử dụng Image đối tượng:

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>