将图像过滤器应用于画布图像数据或JavaScript

Question

我是Flash开发人员,我正在开发游戏的JavaScript端口.在Flash版本中,我使用发光,模糊和颜色矩阵滤镜来操纵显示对象的外观.我想用我的JavaScript视图做同样的事情.其中一些是装饰,而另一些则用于仔细产生所需的结果.因为这个项目的目标是创建一个精确的端口,我想知道我有什么选择将过滤器应用于原始画布数据,内联SVG标签或直接DOM元素.

我考虑过Pixastic,但我的合作者暂时坚持使用GPL许可证,这意味着我使用的任何技术都必须兼容GPL.Pixastic使用Mozilla Public License,因此我无法使用它.(这是一个巨大的失败,让我告诉你.)

我将再次简明扼要地说:如何有效地将像素滤镜应用于DOM元素,使用JavaScript绘制图像数据或SVG标签？

Answer 1

这是一个显示一些svg过滤的示例:

• http://xn--dahlstrm-t4a.net/svg/filters/colormatrix/svgimagefiltering.xhtml

和相应的画布版本:

• http://people.opera.com/patrickl/experiments/canvas/image-edit/

这里有一些用于canvas的js库做我认为你正在寻找的东西:

• http://mezzoblue.github.com/PaintbrushJS/demo/
• https://github.com/pnitsch/BitmapData.js

许多svg过滤器示例可以在http://svg-wow.org(CC0许可)上找到.