Javascript 使用raphael.js可以实现这种像素化效果吗？

我想逐步像素化一个网页上的图像和动画的像素化作为一个过渡。像素化将从使用小像素开始，像素将逐渐变大。最后，像素化将反转，然后显示第二个图像

我正在寻找像像素效果一样的效果-你需要选择像素作为过渡，然后单击图像

---

是的，我可以使用这个库，但我已经有了拉斐尔画布，我想知道这是否（以及如何）可行。

拉斐尔并不是真正用来处理光栅图形的，它是一个向量库。在画布中实现它。

我认为最好的选择是使用另一个库进行像素化（如您链接的库，如果您不介意许可证的话）。Raphael.js不支持这种效果，因为它是一个向量库。您可以将Raphael.js SVG转换为图像并对其运行效果-请参见

注意：这不是您问题的直接解决方案，但它提供了另一种实现像素化效果的方法（适用于寻找解决方案的其他用户）

有一个项目。它是一个能够使用HTML5画布元素将图像转换为像素化版本的脚本，并根据MIT许可证获得许可

GitHub项目页面是。更多示例可参见

用法：

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);

---

对于InternetExplorer来说，这非常简单，因为默认情况下，像素化效果作为扩展CSS属性受到支持

仅用于像素效果的IE CSS属性：

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)";
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1);

对于其他浏览器，您可以基于以下代码开发自己的解决方案：