Рисование PNG в элементе холста - не отображается прозрачность
Я пытаюсь использовать drawImage для рисования полупрозрачного PNG на элементе холста. Однако он рисует изображение как полностью непрозрачное. Когда я смотрю на загружаемый ресурс и загружаю фактический PNG в браузере, он показывает прозрачность, но когда я рисую его на холсте, это не так. Есть идеи?
Вот код:
drawing = new Image()
drawing.src = "draw.png"
context.drawImage(drawing,0,0);
2 ответа
Не забудьте добавить прослушиватель событий к событию загрузки изображения. Загрузка изображений - это то, что происходит в фоновом режиме, поэтому, когда интерпретатор 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);
};
Должно работать нормально, вы уверены, что ваше изображение действительно прозрачное, а не просто белое на заднем плане?
Вот пример рисования прозрачного PNG поверх черного прямоугольника, чтобы основать ваш код на: