Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。
1.3D篝火动画特效
这款篝火特效是基于 three.js 和 canvas 制作的3D动画特效 跟我们平常野外生火烤火很像 鼠标滚轮滚动还可以放大缩小篝火
2.淋雨闪电特效
基于canvas的淋雨特效 和 闪电特效
<body><title>Raining with Thunder</title><canvas id="canvas" width="1280" height="720"style="height: 362px; width: 643px; margin-left: 52px; margin-top: 0px;"></canvas><script id="rendered-js">var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');var stgw = 1280;var stgh = 720;var loffset = 0;var toffset = 0;function _pexresize() {var cw = window.innerWidth;var ch = window.innerHeight;if (cw <= ch * stgw / stgh) {loffset = 0;toffset = Math.floor(ch - cw * stgh / stgw) / 2;canvas.style.width = cw + "px";canvas.style.height = Math.floor(cw * stgh / stgw) + "px";} else {loffset = Math.floor(cw - ch * stgw / stgh) / 2;toffset = 0;canvas.style.height = ch + "px";canvas.style.width = Math.floor(ch * stgw / stgh) + "px";}canvas.style.marginLeft = loffset + "px";canvas.style.marginTop = toffset + "px";}_pexresize();var count = 100;var lcount = 6;var layer = [];var layery = [];ctx.fillStyle = "rgba(255,255,255,0.5)";for (var l = 0; l < lcount; l++) {ctx.clearRect(0, 0, stgw, stgh);for (var i = 0; i < count * (lcount - l) / 1.5; i++) {var myx = Math.floor(Math.random() * stgw);var myy = Math.floor(Math.random() * stgh);var myh = l * 6 + 8;var myw = myh / 10;ctx.beginPath();ctx.moveTo(myx, myy);ctx.lineTo(myx + myw, myy + myh);ctx.arc(myx, myy + myh, myw, 0, 1 * Math.PI);ctx.lineTo(myx - myw, myy + myh);ctx.closePath();ctx.fill();}layer[l] = new Image();layer[l].src = canvas.toDataURL("image/png");layery[l] = 0;}var stt = 0;var str = Date.now() + Math.random() * 4000;var stact = false;function animate() {ctx.clearRect(0, 0, stgw, stgh);for (var l = 0; l < lcount; l++) {layery[l] += (l + 1.5) * 5;if (layery[l] > stgh) {layery[l] = layery[l] - stgh;}ctx.drawImage(layer[l], 0, layery[l]);ctx.drawImage(layer[l], 0, layery[l] - stgh);}if (Date.now() > str) {stact = true;}if (stact) {stt++;if (stt < 5 + Math.random() * 10) {var ex = stt / 30;} else {var ex = (stt - 10) / 30;}if (stt > 20) {stt = 0;stact = false;str = Date.now() + Math.random() * 8000 + 2000;}ctx.fillStyle = "rgba(255,255,255," + ex + ")";ctx.fillRect(0, 0, stgw, stgh);}window.requestAnimationFrame(animate);}animate();</script></body>
3.精美表单切换模板
Html5 流畅的切换登录注册表单 且带有特效
<body><div class="container right-panel-active"><!-- Sign Up --><div class="container__form container--signup"><form action="#" class="form" id="form1"><h2 class="form__title">Sign Up</h2><input type="text" placeholder="User" class="input" /><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><button class="btn">Sign Up</button></form></div><!-- Sign In --><div class="container__form container--signin"><form action="#" class="form" id="form2"><h2 class="form__title">Sign In</h2><input type="email" placeholder="Email" class="input" /><input type="password" placeholder="Password" class="input" /><a href="#" class="link">Forgot your password?</a><button class="btn">Sign In</button></form></div><!-- Overlay --><div class="container__overlay"><div class="overlay"><div class="overlay__panel overlay--left"><button class="btn" id="signIn">Sign In</button></div><div class="overlay__panel overlay--right"><button class="btn" id="signUp">Sign Up</button></div></div></div></div><!-- partial --><script src="./js/script.js"></script></body>
4.新年倒计时
马上临近圣诞和元旦了 还没有圣诞树的朋友可以查看 圣诞合集 下面是有关元旦倒计时的特效效果图
5.粒子文字特效
可自己修改默认的文字 同时还支持手动输入文字
6.时间动画特效
这是一款基于canvas的时间显示特效 每秒都有粒子掉落显示的动画 还是非常精美的 也适合部署在自己的网站内
7.粒子倒计时
粒子聚合组成的一个个数字的切换 也是很巧妙的 适合学习和作为课后练习使用
<body><script src="js/TweenMax.min.js"></script><canvas id="canvas-number"></canvas>
<canvas id="canvas-dots"></canvas><script src="js/script.js"></script></body>
8.烟雾文字消散特效
这是一款 跟蒸汽一样 慢慢的扩散消逝掉 不会像火焰一样只存在瞬间的美
<body><canvas id="myCanvas"></canvas><div class="text"><span>S</span><span>m</span><span>o</span><span>k</span><span>e</span><span> </span><span>烟</span><span>雾</span><span>消</span><span>散</span></div><script type="text/javascript" src='js/three.min.js'></script><script type="text/javascript" src='js/Stats.js'></script><script type="text/javascript" src="js/script.js"></script></body>
