Canvas雾玻璃

本文作者：IMWeb rakuluo 原文出处：IMWeb社区 未经同意，禁止转载

Demo http://lumixraku.github.io/demos/Fog/Fog.html

Canvas tutorial

给大家安利一个学习Canvas的站点

http://www.html5canvastutorials.com/

用到的方法

在开始之前, 最好了解一下Canvas的最基本的使用

• stroke()
• save() clip() restore() http://jo2.org/html5-canvas-clip/ http://www.html5canvastutorials.com/advanced/html5-canvas-clipping-region-tutorial/
• drawImage() http://www.w3school.com.cn/tags/canvas_drawimage.asp
• createPattern() https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/createPattern

关于雾化特效

http://www.cnblogs.com/dson/p/4390641.html

需要明白的是 雾气效果的实际实现和物理现实是相反的, 我们并不是用手指把雾抹掉, 而是用手指画出没有雾的图像.

图片自适应

如果你是希望从一个图片中读取, 那么坐标是相对图片的实际大小, 所以你对图片设置的 width height是木有意义的, 解决办法就是再用一个 temp Canvas , 将图片读入到这个Canvas中 然后用这个temp Canvas 作为图片源