利用Canvas模拟微信红包照片

该实例根据慕课网视频制作

实现原理：在一张模糊化的图片上放置canvas，在canvas上裁剪出一个可见圆区域，利用canvas强大的绘图功能把清晰的图片绘制canvas上，由于已经有了裁剪区域，则所有之后的绘图都会被限制在被剪切的区域内，所以我们只能看到区域内的一小块清晰图片。

1、图片的模糊化，利用CSS3的filter样式

-ms-filter: blur(9px);
-webkit-filter: blur(9px);
-o-filter: blur(9px);
-moz-filter: blur(9px);
filter: blur(9px);

这里的blur就是模糊效果，具体可以搜索 “CSS3 Filter的十种特效”

2、创建canvas，裁剪区域

context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI*2, false);

3、在canvas上画图

context.drawImage(
    image,
    Math.max(leftMargin,0), Math.max(topMargin,0),//开始剪切的 x y坐标位置
    Math.min(canvas.width,image.width), Math.min(canvas.height,image.height),//被剪切图像的宽，高度
    leftMargin<0?-leftMargin:0, topMargin<0?-topMargin:0, //在画布上放置图像的 x 坐标位置
    Math.min(canvas.width,image.width), Math.min(canvas.height,image.height)//要使用的图像的宽，高度
);

4、利用setInterval时间函数逐步增大区域的半径，产生动画，然后完成整个效果

demo地址：http://aweig.github.io/demo/canvas_redphotos/index.html

源码地址：

https://github.com/aweig/aweig.github.io/tree/master/demo/canvas_redphotos