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">

<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>

<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>

<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>

<script src="./js/script.js"></script>

</body>

```

4.新年倒數計時

馬上臨近聖誕和元旦了還沒有聖誕樹的朋友可以檢視 [聖誕合集]() 下面是有關元旦倒數計時的特效效果圖

5.粒子文字特效

可自己修改預設的文字同時還支援手動輸入文字

6.時間動畫特效

這是一款基於canvas的時間顯示特效每秒都有粒子掉落顯示的動畫還是非常精美的也適合部署在自己的網站內

7.粒子倒數計時

粒子聚合組成的一個個數字的切換也是很巧妙的適合學習和作為課後練習使用

```html

<body>

</body>

```

8.煙霧文字消散特效

這是一款跟蒸汽一樣慢慢的擴散消逝掉不會像火焰一樣只存在瞬間的美

```html

<body>

</div>

</body>

```

9.賽車闖關遊戲

Html5 canvas創意特效合集

相關文章