H5 canvas画布 文字雨滴效果展示
所用到的知识点:
1.Math.floor() === 向下取整
2.Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
3.setInterval()设置定时器
4.clearInterval()清除定时器
5.获取浏览器屏幕的宽度和高度
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
所以这里我为了涵盖所有浏览器,将获取方法均列出来
<script>
//获取画布对象
var canvas=document.getElementById("canvas");
//获取画布上下文
var context=canvas.getContext("2d");
//获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度,且涵盖所有浏览器
var W=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var H=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
//设置canvas的宽度和高度
canvas.width=W;
canvas.height=H;
//每个文字的大小
var fontsize=16;
//计算列
var colunms = Math.floor(W/fontsize);
//记录每列文字的y轴坐标
var drops=[];
//给每一列文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
console.log(drops)
//运动的字体
var str="显示的运动的字体";
//绘画的函数
function draw(){
//黑BG的帆布
//半透明BG显示轨迹
context.fillStyle="rgba(0,0,0,0.05)";
context.fillRect(0,0,W,H);
//给字体添加样式
context.font=fontsize+"px 微软雅黑";
//给字体添加颜色
context.fillStyle="#00cc33"
//循环字体,写入画布中
for(var i=0;i<colunms;i++){
//随即汉字打印
var index=Math.floor(Math.random()*str.length);
//Math.random()方法可返回介于 0 ~ 1 之间的一个随机数
//index为随机整数
var x=i*fontsize;//x坐标
var y=drops[i]*fontsize;//y坐标
context.fillText(index,x,y);
//如果要改变时间,肯定就是改变每次他的起点
//在屏幕上划线后,把它的顶部随机发送到顶部
//将一个随机性添加到复位中,使分散在轴上的下降
console.log(x,y,index)
if (y>=canvas.height&&Math.random()>0.99) {
drops[i]=0;
}
//增加的y坐标
drops[i]++;
}
};
draw();
var intervalId=setInterval(draw,30)
//测试效果开始
function operateAnimation(objBtn){
var opjBtn=document.getElementById("operate");
if (objBtn.value=="开始") {
objBtn.value="暂停";
inintervalId=setInterval(draw,30);
} else{
objBtn.value="开始";
clearInterval(intervalId);
}
return false;
}
</script>
以上代码为整体格式,如有建议请联系小编。