canvas高级动画001：文字瀑布流

文章目录

我们经常会看到一些科技场景，01数字不断交替下移或者扩散闪现等。这里是一个示例，通过setInterval的方式，来不断的绘制文字，形成瀑布流的状态。

示例效果图

示例源代码（共88行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [e-mail]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-25
*/
<template>
	<div class="container">
		<div class="top">
			<h3>canvas文字瀑布流特效</h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>
		<div class="dajianshi ">
			<canvas id="dajianshi" width="1000" height="500"></canvas>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			getdata() {
				var canvas = document.getElementById('dajianshi');
				var context = canvas.getContext('2d');
				var fontSize = 16;
				var col = Math.floor(1000 / fontSize);
				var cpy = [];
				for (var i = 0; i < col; i++) {
					cpy[i] = 1;
				}
				//定义文字
				var str = "dajianshidajianshi";
				draw();
				setInterval(draw, 30);
				function draw() {
					context.beginPath();
					context.fillStyle = "rgba(0,0,0,0.05)";
					context.fillRect(0, 0, 1000, 500);
					context.font = "16px bold 微软雅黑 ";
					context.fillStyle = "#00cc33";
					for (var i = 0; i < col; i++) {
						var index = Math.floor(Math.random() * str.length);
						var x = i * fontSize;
						var y = cpy[i] * fontSize;
						context.fillText(str.charAt(index), x, y);
						if (y >= 500 && Math.random() > 0.98) 
						{
							cpy[i] = 0; // 只要Math.random> 0.98 时才纵坐标从0开始写字
						}
						cpy[i]++;
					}
				}

			},
		}
	}
</script>

<style scoped>
	.container {
		width: 1000px;
		height: 600px;
		margin: 50px auto;
		border: 1px solid green;
		position: relative;
	}

	.top {
		margin: 0 auto 0px;
		padding: 10px 0;
		background: darkgreen;
		color: #fff;
	}

	.dajianshi {
		margin: 2px auto 0;
		width: 1000px;
		height: 500px;
	}
</style>

canvas基本属性

canvas基础方法