将PNG绘制到canvas元素 - 不显示透明度 [英] Drawing PNG to a canvas element -- not showing transparency

问题描述

我想使用drawImage在canvas元素上绘制半透明的PNG。然而，它将图像绘制为完全不透明。当我看着正在加载的资源，并在浏览器中加载实际的PNG，它显示的透明度，但是当我在画布上绘制它不是。任何想法？

I'm trying to use drawImage to draw a semi-transparent PNG on a canvas element. However, it draws the image as completely opaque. When I look at the resource that's being loaded and load the actual PNG in the browser, it shows the transparency, but when I draw it on the canvas, it does not. Any ideas?

以下是代码：

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

推荐答案

不要忘记添加事件侦听器图像的负载事件。图像加载是在后台进行的，所以当JavaScript解释器访问canvas.drawImage部分时，图像很可能不会加载，只是一个没有内容的空图像对象。

Don't forget to add an event listener to the image's load event. Image loading is something that happens in the background, so when the JavaScript interpreter gets to the canvas.drawImage part it is most likely the image probably will not have loaded yet and is just an empty image object, without content.

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绘制到canvas元素 - 不显示透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！