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

最新推荐文章于 2024-04-12 14:13:44 发布

lyltiger

最新推荐文章于 2024-04-12 14:13:44 发布

阅读量1.1w

点赞数 2

分类专栏： H5JSCSS 文章标签： html5 h5 javascript css 效果

学习必须如蜜蜂一样，采过许多花，才能酿出蜜来

本文链接：https://blog.csdn.net/lyltiger/article/details/49181595

版权

H5JSCSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

lyltiger

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
Html5下炫酷文字雨滴效果_简单实现

@yuHG在学习h5，需要做个炫酷文字效果，让我帮忙，我也快速学习下html知识，写个demo。先看下效果：动态图：http://yunpan.cn/cFdKWrfA7gv2B 访问密码 7dbc所用到的知识点canvas <canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 <canvas> 标签只是图形容器，必须使用脚本来绘制图形。
复制链接

扫一扫