画布上的 PNG 透明度
canvas 支持 PNG alpha 吗？我在添加到画布中的一些 PNG 时遇到了一些问题。图像的边缘呈黑色且呈锯齿状，就好像不存在或不识别 Alpha 通道一样。
Does canvas support PNG alpha? Im having some issues with a few PNGs that I've added to the canvas. The edges of the images are black and jagged as if no alpha channel exists or is being recognized.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您将带有 alpha 的 24 位 PNG 放在画布上，它会理解它。
https://developer.mozilla.org/en-US /docs/Web/Guide/HTML/Canvas_tutorial/Using_images
也许你的 PNG 不干净，即边界有不透明区域？
If you put a 24-bit PNG with alpha on the canvas it understands it.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
Maybe your PNGs are not clean, i.e. have non-transparent regions at the borders?
使用 clearRect() 或 fillRect() 在重绘 PNG 图像之前，如果你是在requestAnimationFrame 或 setInterval 循环。
我偶然发现了这个问题，因为我有类似的问题，但我的图像已经是 24 位的。有一个 requestAnimationFrame 循环将 PNG 图像重新绘制到画布上，并且（正如您所说）当它们重叠时，结果是“烧毁”边缘，它应该具有 alpha“淡出”透明度。
只需在调用drawImage之前清理该区域，您就可以防止该图像在其自身上渲染。
Use clearRect() or fillRect() before redrawing the PNG image, if you are doing it in a requestAnimationFrame or setInterval loop.
I stumbled upon this question as I had a similar problem, but my image was already at 24-bit. Had a requestAnimationFrame loop redrawing the PNG image to the canvas and (as you said) as they overlapped, the result was this "burned" edges where it should have the alpha "fade-out" transparency.
Simply by cleaning the area before calling drawImage, you can prevent that image to be rendered over itself.