Html5 canvas创意特效合集

标签：特效 canvas stgh ctx Html5 var 合集 Math

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

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

</body>
```

4.新年倒计时

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