本例子的难点主要在于模拟是否足够真实：
越往上，烟雾越淡，实际上就是越靠近上方，透明度越低； // 越靠近边缘，透明度越低 // 纵向透明度变化要比横向的明显 this.alpha = (1 - Math.abs(canvasWidth*0.5 - this.x) / canvasWidth) * (0.7 - Math.abs(canvasHeight*0.5 - this.y) / canvasHeight);
所谓“缭绕”，就是运动看似不具有规律性。要知道，凡事有轨迹有套路的运动都是有规律性地，你说这烟雾上上下下，左左右右运动太过于规律，效果就会打折扣，但是，真的没有规律又不好通过代码控制运动轨迹。因此，为了搞到一个接近缭绕效果的运动函数，还真是烧了不少脑细胞。
本文三个例子都是canvas 2D效果，是入门学习非常好的例子。
canvas非常适合实现密集型图形和动画，可以把性能优势给发挥出来，因为就是一块画布渲染；另外一点就是省流量，比方说第2个例子的噪点效果，如果是同样效果1920*500的png图片，科科，我特意保存了下，286K，1K的代码PK 286K的图片，显然是完爆啊！
canvas还支持3D效果，也就是webGL, 亦称3D Canvas graphics, IE11+支持，目前Android 4.*任意版本都还不支持，业内著名的相关库就是threejs了。
不过，我没研究过，也没兴趣，不是我的方向。
好了，就这些，感谢阅读。
本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址： ?p=5404
（本篇完）
相关文章
精彩导读
热门资讯
关注我们
