h5+js实现文字雨
实现流程
我们提供的服务有:成都做网站、网站制作、成都外贸网站建设、微信公众号开发、网站优化、网站认证、沛县ssl等。为1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的沛县网站制作公司
首先我们要知道什么是Canvas
Canvas是h6的一个标签(画布)在画布上任何一点都可以操作(绘制)
Canvas需要配合js来使用
创建Canvas
新建一个html文件,在
标签中添加如下标签 代码如下创建了Canvas后,接下来给canvas设置一下样式(让canvas填充整个屏幕)在head标签中添加如下代码
#my_canvas {
position:absolute;/*设置布局为绝对布局*/
width:100%;/*宽度100%填充屏幕*/
height:100%;/*高度100%填充*/
top:0;/*让元素与窗口无顶部边距*/
left:0;/*让元素与窗口无左边距*/
}
添加了样式后我们的canvas就会填充整个屏幕了
接下来我们要用js来实现我们想要的效果了
在body的最下方中添加如下代码
//这里编写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);
//打开网页 看看效果 我们会发现整个屏幕变成了黑色
了解了Canvas 基本使用后 我们就可以来绘制想要的效果了
我们现在让屏幕有一种从白到黑的动画效果
//这里编写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;
function(){ //原油代码 http://www.kaifx.cn/mt4/kaifx/1803.html
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秒
有了这种效果后,我们接下来只需要绘制文本就行了 (绘制后又会被背景给填充 所以就实现了文本从出现到慢慢消失的效果)
以下代码就可以 实现文字雨的效果了
//这里编写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
这样,效果就实现了!纯手码.
文章标题:h5+js实现文字雨
分享URL:http://scjbc.cn/article/gegehg.html