(详)h5+js实现文字雨 Canvas的使用
程序员文章站
2024-03-18 13:36:10
...
Hello,我是Shendi,在web前端的路上一去不复返
这次给大家带来了一个文字雨效果,效果如下
实现流程
首先我们要知道什么是Canvas
Canvas是h5的一个标签(画布) 在画布上任何一点都可以操作(绘制)
Canvas需要配合js来使用
创建Canvas
新建一个html文件,在<body>标签中添加如下标签 代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<canvas id='my_canvas'>此处给canvas添加id值 用于js获取此元素 必要</canvas>
</body>
</html>创建了Canvas后,接下来给canvas设置一下样式(让canvas填充整个屏幕) 在head标签中添加如下代码
<style>
#my_canvas {
position:absolute;/*设置布局为绝对布局*/
width:100%;/*宽度100%填充屏幕*/
height:100%;/*高度100%填充*/
top:0;/*让元素与窗口无顶部边距*/
left:0;/*让元素与窗口无左边距*/
}
</style>添加了样式后我们的canvas就会填充整个屏幕了
接下来我们要用js来实现我们想要的效果了
在body的最下方中添加如下代码
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//这里编写js脚本
//我们先要获取到canvas
var myCanvas= document.getElementById("my_canvas");
//然后要获取到绘制的环境(可以理解为画笔,从canvas中获取)
var context = myCanvas.getContext("2d");
//获取到环境后 我们就可以绘制了
//我们需要知道canvas的大小 并且给canvas设置一下大小
//因为我们在css中给canvas设置的是百分比,所以我们获取到的canvas的大小会比窗口小
//但是canvas的确是填充了屏幕了 可以按f12 将鼠标放在canvas元素上观看
//所以我们这里还需要再次给canvas设置大小,不能去除css样式,去掉后会发现多了滚动条
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//我们先填充整个屏幕试试
//可以使用fillStyle来设置画笔颜色 rgba函数等于 r=红 g=绿 b=蓝 a=透明度
context.fillStyle = "rgba(0,0,0,1)";
//fillRect函数是绘制一个正方形 第一个参数是x轴 第二个是y轴 3=宽度 4=高度
context.fillRect(0,0,width,height);
//打开网页 看看效果 我们会发现整个屏幕变成了黑色
</script>
</body>了解了Canvas 基本使用后 我们就可以来绘制想要的效果了
我们现在让屏幕有一种从白到黑的动画效果
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//这里编写js脚本
//我们先要获取到canvas
var myCanvas= document.getElementById("my_canvas");
//然后要获取到绘制的环境(可以理解为画笔,从canvas中获取)
var context = myCanvas.getContext("2d");
//获取到环境后 我们就可以绘制了
//我们需要知道canvas的大小 并且给canvas设置一下大小
//因为我们在css中给canvas设置的是百分比,所以我们获取到的canvas的大小会比窗口小
//但是canvas的确是填充了屏幕了 可以按f12 将鼠标放在canvas元素上观看
//所以我们这里还需要再次给canvas设置大小,不能去除css样式,去掉后会发现多了滚动条
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//设置颜色 将透明度改为0.1 这样绘制出来的正方形就会是浅色 浅色叠起来就变成深了
context.fillStyle = "rgba(0,0,0,0.1)";
//setInterval函数是定时调用指定function里的代码 并隔多少秒重复调用(永久的)
setInterval(function () {
context.fillRect(0,0,width,height);
},1000);
//打开网页 看看效果 我们会发现动画效果实现了 我们设置的间隔是1秒
</script>
</body>有了这种效果后，我们接下来只需要绘制文本就行了 (绘制后又会被背景给填充 所以就实现了文本从出现到慢慢消失的效果)
以下代码就可以 实现文字雨的效果了
<body>
<canvas id='my_canvas'>...</canvas>
<script type='text/javascript'>
//这里编写js脚本
//我们先要获取到canvas
var myCanvas= document.getElementById("my_canvas");
//然后要获取到绘制的环境(可以理解为画笔,从canvas中获取)
var context = myCanvas.getContext("2d");
//获取到环境后 我们就可以绘制了
//我们需要知道canvas的大小 并且给canvas设置一下大小
//因为我们在css中给canvas设置的是百分比,所以我们获取到的canvas的大小会比窗口小
//但是canvas的确是填充了屏幕了 可以按f12 将鼠标放在canvas元素上观看
//所以我们这里还需要再次给canvas设置大小,不能去除css样式,去掉后会发现多了滚动条
var width = myCanvas.width = window.innerWidth;
var height = myCanvas.height = window.innerWidth;
//要绘制的文本
var text = "Shendi";
//将文本变为字符数组
text = text.split("");
//文本大小 设置画笔的大小
var t_size = 20;
context.font = t_size + "px 黑体";
//获取一行能画多少个 以及能画多少列
var row = width / t_size;
var col = height / t_size;
//获取每一行对应的列位置(用来实现文字的y位置不同的效果)
var cols = [];
for (var i = 0;i < col;i++) {
cols[i] = 1;
}
//setInterval函数是定时调用指定function里的代码 并隔多少秒重复调用(永久的)
setInterval(function () {
//设置颜色 将透明度改为0.1 这样绘制出来的正方形就会是浅色 浅色叠起来就变成深了
context.fillStyle = "rgba(0,0,0,0.1)";
context.fillRect(0,0,width,height);
//设置文字的颜色 绿色
context.fillStyle = "#0F0";
//绘制文字 循环 一次画一行
for (var i = 0;i < row;i++) {
//判断此列是否到底了 到底了则重新开始
//为了实现不是一行同行的往下落 我们需要随机来将某个列重新开始
//所以要加 || Math.random() > 0.96 只有0.04的几率让这列重新开始 可自行调整
if (cols[i] >= col || Math.random() >= 0.96) {
cols[i] = 0;
}
//绘制文字 fillText用于绘制文字 第一个参数是绘制的文本 第二个是x坐标 第三个是y
//这里我每次绘制的都是按顺序来的
context.fillText(text[i % 6],i * t_size,cols[i] * t_size);
}
},33);
//打开网页 看看效果 如果效果没实现试试将调用间隔调低 我这里是33毫秒调用一次
//还有绘制的正方形的颜色设置 透明度可以改的更低 让文字保留的更久
//可以试着调一下调用速度 字体大小 透明度等看看效果
//效果完成 --Shendi
</script>
</body>这样，效果就实现了！纯手码.