canvas - 画布上的 PNG 透明度

Question

画布是否支持 PNG alpha？我对添加到画布的一些 PNG 有一些问题。图像边缘呈黑色且呈锯齿状，好像不存在或正在识别 Alpha 通道。

Answer 1

如果你在画布上放置一个带有 alpha 的 24 位 PNG，它就会理解它。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

也许您的 PNG 不干净，即边界处有不透明的区域？

Answer 2

如果您在 requestAnimationFrame 或 setInterval 循环中重绘 PNG 图像，请在重绘 PNG 图像之前使用clearRect()或fillRect() 。

我偶然发现了这个问题，因为我遇到了类似的问题，但我的图像已经是 24 位的了。有一个 requestAnimationFrame 循环将 PNG 图像重新绘制到画布上，并且（如您所说）当它们重叠时，结果是这个“烧毁”的边缘，它应该具有 alpha“淡出”透明度。

只需在调用 drawImage 之前清理该区域，您就可以防止该图像被渲染到自身之上。