html5 – 将PNG绘制到画布元素 – 不显示透明度

前端之家收集整理的这篇文章主要介绍了html5 – 将PNG绘制到画布元素 – 不显示透明度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图使用drawImage在canvas元素上绘制一个半透明的PNG。但是,它将图像完全不透明。当我查看正在加载的资源并在浏览器中加载实际的PNG时,它会显示透明度,但是当我在画布上绘制它时,它不会。有任何想法吗?

以下是代码

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

解决方法

不要忘记为图像的加载事件添加事件侦听器。图像加载是在后台发生的,所以当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);
};

猜你在找的HTML5相关文章