Рисование PNG в элемент холста - отсутствие прозрачности

Я пытаюсь использовать drawImage для рисования полупрозрачного PNG на элементе canvas. Однако он рисует изображение как полностью непрозрачное. Когда я смотрю на ресурс, который загружается и загружает фактический PNG в браузере, он показывает прозрачность, но когда я рисую его на холсте, это не так. Любые идеи?

Здесь код:

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

Ответы

Ответ 1

Не забудьте добавить прослушиватель событий к событию загрузки изображения. Загрузка изображения - это то, что происходит в фоновом режиме, поэтому, когда интерпретатор 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);
};

Ответ 2

Должно быть хорошо, вы уверены, что ваш образ действительно прозрачен, а не только белый в фоновом режиме?

Вот пример рисования прозрачного PNG над черным прямоугольником, чтобы отбросить код:

http://jsfiddle.net/5P2Ms/

Ответ 3

Если вы рисуете его в цикле рендеринга, вам нужно сначала запустить context.clearRect( 0, 0, width, height ), иначе вы просто пишете png над png каждый кадр, который в конечном итоге будет непрозрачным. (Но кадры выглядят быстро, поэтому вы не увидите этого невооруженным глазом.)

Ответ 4

Вы можете просто вставить любое прозрачное изображение с помощью объекта 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>

Ответ 5

NB, если вы должны использовать canvas.toDataURL, и вы установите тип mimetype на что-либо другое, кроме как сказать gif или png, прозрачные части изображения будут полностью черными.

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