@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;
}