您的位置：首页 > Web前端 > HTML5

Html5下炫酷文字雨滴效果_简单实现

2015-10-17 00:41 671 查看

@yuHG在学习h5，需要做个炫酷文字效果，让我帮忙，我也快速学习下html知识，写个demo。

先看下效果：

动态图、源码地址：http://yunpan.cn/cFLDzQfk8yHi8 访问密码 e8e6

所用到的知识点

canvas

<canvas>

标签通过脚本（通常是

JavaScript

）来绘制图形（比如图表和其他图像）。

<canvas>

标签只是图形容器，必须使用脚本来绘制图形。

window尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于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

填充方法：

fillStyle：设置或返回用于填充绘画的颜色、渐变或模式。

fillRect：绘制”被填充”的矩形。

fillText：在画布上绘制”被填充的”文本。

Math数学函数

floor(x)：对 x 进行下舍入。

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由该方法返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval()：取消由 setInterval() 设置的 timeout。

具体代码：

文件：index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Html5下炫酷文字雨滴效果_简单实现</title>
</head>
<body bgcolor="#00008b">
<div id="test"></div>
<br>
<input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
<br>
<canvas id="c"></canvas>
<script language="JavaScript" src="app.js">
</script>
</body>
</html>

文件：app.js

/**
* Created by Steve on 2015/2/8.
*/
var test = document.getElementById("test");
var str = "str";

var c = document.getElementById("c");
var ctx = c.getContext("2d");
/** 这里控制显示的宽度和高度，且涵盖所有浏览器 */
c.width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
c.height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//c.width = 300;
//c.height = 300;

//ctx.fillStyle = "1cba9c";
//ctx.fillRect(0,0,100,100);
//ctx.fillStyle = "ecb69c";
//ctx.fillText("雨滴",10,90);

var chinese = "炫酷雨滴";
chinese = chinese.split("");

var fsize = 20;
columns = c.width / fsize;

var drops=[];
for(var x=0;x<columns;x++) {
drops[x] = 0;
}

function draw(){
ctx.fillStyle="rgba(0,0,0,0.09)";
ctx.fillRect(0,0, c.width, c.height);

ctx.fillStyle="#0f0";
ctx.font = fsize + "px arial";// arial is font.

for(var i=0;i<drops.length;i++){
var text = chinese[Math.floor(Math.random()*chinese.length)];
ctx.fillText(text,i*fsize,drops[i]*fsize);

drops[i]++;
if(drops[i]*fsize > c.height && Math.random() > 0.9){
drops[i] = 0;
}

str = drops[i]+",";
}
test.innerText = columns + " , i:" + str;// 测试数据

}
/// draw();
var intervalId = setInterval(draw,50);// 这里修改控制速度

// 测试效果开始/暂停
function operateAnimation(objBtn){
var operate = document.getElementById("operate");

if(objBtn.value == "开始"){
objBtn.value = "暂停";
intervalId = setInterval(draw,30);
}else{
objBtn.value = "开始";
clearInterval(intervalId);
}
return false;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 h5 javascript css 效果

相关文章推荐

新的分享

章节导航