HTML 5画布图像特效

时间:2012-05-11 00:03:20

标签: html5 graphics canvas 2d html5-canvas

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

渲染图像是否与将context.fillStyle设置为原始形状的ARGB值相当?

是否存在乘法模式?即:将图像像素颜色乘以目标颜色。这可以用于原始照明。 (我玩弄了context.globalCompositionOperation,但没有找到任何有趣的东西)

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

注意:我不想将WebGL用于此应用程序,而且它是一款游戏。这意味着它是实时的,我不能用javascript代码修改每个像素,因为这需要太长时间。 (虽然我可能会在玩家死亡并且屏幕上没有任何东西在屏幕上移动时这样做了)

1 个答案:

答案 0 :(得分:0)

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