Html5 canvas创意特效合集

迂幵

已于 2022-12-29 19:24:56 修改

阅读量1.7k

点赞数 5

分类专栏：动画前端文章标签： html5 html 前端

于 2022-12-20 17:17:32 首次发布

本文链接：https://blog.csdn.net/qq_50594742/article/details/128386420

版权

前端同时被 2 个专栏收录

71 篇文章 3 订阅

订阅专栏

动画

53 篇文章 0 订阅

订阅专栏

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

迂幵

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Html5 canvas创意特效合集

Canvas就像一块画布，我们可以通过调用脚本在Canvas上绘制任意形状，甚至是制作动画。本文就是收集了很多非常富有创意的一些canvas动画特效例子，这些例子都非常适合大家学习。1.3D篝火动画特效这款篝火特效是基于 three.js 和 canvas 制作的3D动画特效跟我们平常野外生火烤火很像鼠标滚轮滚动还可以放大缩小篝火2.淋雨闪电特效基于canvas的淋雨特效和闪电特效3.精美表单切换模板Html5 流畅的切换登录注册表单且带有特效4.新年倒计时马上临近圣诞和元旦了
复制链接

扫一扫