在上一篇文章中，说到了使用css3的滤镜来处理图片效果，虽然看上去很强大，通过拖动range控件也很方便来设置其对应值。但是有个问题，即你只能看到对应的效果，却无法右键保存处理的图片。你当然可以通过截图来保存，但不仅不方便，截的图也不精确。

显然，本篇文章就是为了解决以上问题而来的。

若你对canvas了解，你会发现它处理图片的功能完全不亚于css3。首先来看个demo：canvas滤镜处理图片

css3中filter俗称滤镜效果。它可以调整元素的色调（灰化、亮化、对比度、饱和度）、也能使元素产生模糊和反相的等效果。通常，我们使用filter的各种功能函数来处理图片，如果你将它应用于html页面，也会获得不一般的效果。这个特性支持最新版的chrome和firefox，接下来，我们来介绍filter下的八种功能：

jvectormap是一款基于jquery的地图插件，它的官网 http://jvectormap.com/

首先来看个例子。中国每个省份的称呼，然后，开始使用jvectormap来开发一款地图吧

如你所知，在canvas中也有像css3里变形处理的功能，比如移动translate、旋转rotate以及缩放scale等。虽然这些应用在两者看来差不多。但是有一点是必须明确的，即css3中所有的变形处理中心点都是针对DOM元素本身，而在canvas里没有元素之说，因为它是由各种线条和图形组成的一个整体，类似一个画板。

在文章的开头，我们先来看下什么是音乐可视化:

音乐可视化–web audio

没错！这个类似音频解调器的东西就是音乐可视化。我们通过某种手段抓取音频数据，然后根据这些数据及时绘制到画布。要将数据绘制在画布中，我们需要准备一个canvas，有：