0

我正在开发一个基于 2d 平铺的 HTML5 画布应用程序，我想知道在绘制图像时可以对图像应用什么样的特殊效果（ context.drawImage(...) ）。我遇到的唯一技巧是修改 canvas.globalAlpha 值。这会从之前的帧中留下一些颜色，如果画布对象上的东西在帧之间移动，则会产生模糊或眩晕的效果。

是否有一些渲染图像的方法可以与将 context.fillStyle 设置为原始形状的 ARGB 值相媲美？

有乘法模式吗？即：将图像像素颜色乘以目标颜色。这可以用于原始照明。（我玩弄了 context.globalCompositionOperation 但没有发现任何有趣的东西）

你还遇到过其他很酷的效果吗？

注意：我不想在这个应用程序中使用 WebGL，它是一个游戏。这意味着它是实时的，我不能用 javascript 代码修改每个像素，因为这需要很长时间。（尽管当玩家死亡并且屏幕上没有任何内容时我可能会这样做）

4

1 回答 1

0

Canvas 不提供任何预定义的效果。要操纵图像形状，您可以使用矩阵变换。
要操作图像像素和颜色，您应该使用 getImageData 方法 - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation。然后使用谷歌查找算法来应用一些效果，如漩涡、模糊、浮雕等。

于 2012-06-15T10:35:24.413 回答