canvas炫酷文字流

青春..荒唐

浏览: 962089 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

canvas

canvas

以前经常看到文字流特效，今天研究下原理其实很简单。

主要利用H5画布，通过js勾勒渲染，具体步骤详解已在代码里注释出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字雨滴效果</title>
    <style type="text/css">
        *{padding:0;margin:0}
        html{overflow:hidden}
    </style>
</head>
<body>
<div id="test"></div>
<br>
<input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
<br>
<canvas id="canvas" style="background:#000"></canvas>
<script type="text/javascript">

//    window.onload = function(){
        //获取画布对象
        var canvas = document.getElementById("canvas");
        //获取画布的上下文
        var context =canvas.getContext("2d");
        //获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度，且涵盖所有浏览器 */
        var W = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;
        var H = 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);


        //设置canvas的宽度和高度
        canvas.width = W;
        canvas.height = H;
        //每个文字的字体大小
        var fontSize = 16;
        //计算列
        var colunms = Math.floor(W /fontSize);
        //Math.floor() === 向下取整
        //记录每列文字的y轴坐标
        var drops = [];
        //给每一个文字初始化一个起始点的位置
        for(var i=0;i<colunms;i++){
            drops.push(0);
        }
        console.log(drops)
        //运动的文字
        var str ="显示的运动字体";
        //4:fillText(str,x,y);原理就是去更改y的坐标位置
        //绘画的函数
        function draw(){
            //黑BG的帆布
            //半透明BG显示轨迹
            context.fillStyle = "rgba(0,0,0,0.05)";
            context.fillRect(0,0,W,H);
            //给字体设置样式
            context.font = "700 "+fontSize+"px  微软雅黑";
            //给字体添加颜色
            context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色
            ////循环字体---写入画布中
            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);
                //如果要改变时间，肯定就是改变每次他的起点
                //在屏幕上划线后，把它的顶部随机发送到顶部
                //将一个随机性添加到复位中，使分散在轴上的下降
                if(y >= canvas.height && Math.random() > 0.99){
                    drops[i] = 0;
                }
                //增加的Y坐标
                drops[i]++;
            }
        };
        draw();
        var intervalId = setInterval(draw,30);

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

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

//    };


</script>
</body>
</html>

拓展：

（一）获取浏览器屏幕的宽度和高度

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

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

所以这里我为了涵盖所有浏览器，将获取方法均列出来

（二）setInterval（翻译为set设置Interval间隔）

setIntervalsetInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",1000)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>

【与setTimeout的使用区别】

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

(方法):

实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。

（3）Math.floor() === 向下取整

（4）Math.random()方法可返回介于 0 ~ 1 之间的一个随机数

（5）clearInterval（翻译为清除clear间隔interval）

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

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

分享到：

标签云球状3D旋转展示 | css优化

2018-01-08 18:30
浏览 971
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论