Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。 更多源码可在在这里资源站 -源码部分预览下载

1.3D篝火动画特效

这款篝火特效是基于 three.js 和 canvas 制作的3D动画特效 跟我们平常野外生火烤火很像 鼠标滚轮滚动还可以放大缩小篝火

2.淋雨闪电特效

基于canvas的淋雨特效 和 闪电特效 

```html

<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 流畅的切换登录注册表单 且带有特效

```html

<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.新年倒计时

马上临近圣诞和元旦了  还没有圣诞树的朋友可以查看 [圣诞合集](https://www.hereitis.cn/articleDetails/969)  下面是有关元旦倒计时的特效效果图

5.粒子文字特效

可自己修改默认的文字  同时还支持手动输入文字

6.时间动画特效

这是一款基于canvas的时间显示特效 每秒都有粒子掉落显示的动画 还是非常精美的 也适合部署在自己的网站内

7.粒子倒计时

粒子聚合组成的一个个数字的切换 也是很巧妙的 适合学习和作为课后练习使用

```html

<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.烟雾文字消散特效

这是一款 跟蒸汽一样 慢慢的扩散消逝掉  不会像火焰一样只存在瞬间的美

```html

<body>

<canvas id="myCanvas"></canvas>

<div class="text">

<span>S</span>

<span>m</span>

<span>o</span>

<span>k</span>

<span>e</span>

<span>&nbsp;</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>

```

9.赛车闯关游戏