Html5 canvas創(chuàng)意特效合集
Canvas就像一塊畫布，我們可以通過調(diào)用腳本在Canvas上繪制任意形狀，甚至是制作動(dòng)畫。本文就是收集了很多非常富有創(chuàng)意的一些canvas動(dòng)畫特效例子，這些例子都非常適合大家學(xué)習(xí)。?更多源碼可在在這里資源站 -源碼部分預(yù)覽下載
1.3D篝火動(dòng)畫特效
這款篝火特效是基于 three.js 和 canvas 制作的3D動(dòng)畫特效 跟我們平常野外生火烤火很像 鼠標(biāo)滾輪滾動(dòng)還可以放大縮小篝火
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/802b610788e2d88a1bd41e678a85c0f4
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>
```
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/01d8351c82bf63085960b4bbebb74c0d
3.精美表單切換模板
Html5 流暢的切換登錄注冊表單 且?guī)в刑匦?/p>
```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>
```
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/807082b3b94034c89aaa1b5913b2b4ee
4.新年倒計(jì)時(shí)
馬上臨近圣誕和元旦了? 還沒有圣誕樹的朋友可以查看文章 https://www.hereitis.cn/articleDetails/969? 下面是有關(guān)元旦倒計(jì)時(shí)的特效效果圖
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/12e04710507a3ae8c3e36a8c492c02f9
5.粒子文字特效
可自己修改默認(rèn)的文字? 同時(shí)還支持手動(dòng)輸入文字
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/ce6cb951f9c8dfc5591acef56336cb55
6.時(shí)間動(dòng)畫特效
這是一款基于canvas的時(shí)間顯示特效 每秒都有粒子掉落顯示的動(dòng)畫 還是非常精美的 也適合部署在自己的網(wǎng)站內(nèi)
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/e0fd0167fbb1a49a3cc48fc552c9d3d2
7.粒子倒計(jì)時(shí)
粒子聚合組成的一個(gè)個(gè)數(shù)字的切換 也是很巧妙的 適合學(xué)習(xí)和作為課后練習(xí)使用
```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>
```
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/1f524a99bc7047e5f19ac07711391610
8.煙霧文字消散特效
這是一款 跟蒸汽一樣 慢慢的擴(kuò)散消逝掉? 不會(huì)像火焰一樣只存在瞬間的美
```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> </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>
```
演示預(yù)覽：https://www.hereitis.cn/soundCodeDetails/ef75a34c2cf04e8375ba38b75e41782a
