`

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() 方法的参数。 

 

 

 

.

 

 

 

分享到:
评论

相关推荐

    html5 canvas炫酷线条动画特效.zip

    这个“html5 canvas炫酷线条动画特效.zip”压缩包包含了一个利用Canvas API创建的线条动画特效,它展示了HTML5的强大功能,并结合了jQuery库来简化JavaScript的处理。 首先,Canvas API是HTML5的一个核心特性,它...

    HTML5超酷文字动画特效

    这些特效通常基于CSS3、JavaScript和HTML5的Canvas等核心特性,使得文本不再仅仅是静态的信息展示,而是变成了交互式、动态的艺术作品。 在描述中提到的"在鼠标hover或点击文字时制作出各种神奇的动画效果",这表明...

    7款酷炫HTML5+Canvas全屏网页背景动画特效

    它提供了丰富的绘图API,包括绘制路径、矩形、圆形、图像以及文字等。开发者可以通过修改坐标、颜色、透明度等属性来实现动态效果。 3. **Canvas动画原理** 动画效果通常是通过在每一帧更新画布上的内容来实现的。...

    HTML5浪漫表白文字动画特效网页

    粒子动画是一种流行的设计趋势,它通过生成大量小元素(在本例中是文字)来创建动态视觉效果。这些粒子以特定的模式和速度移动,形成或消失,营造出浪漫和梦幻的氛围。HTML5的Canvas API是实现这种效果的关键,...

    canvas特效

    总结来说,"canvas特效"是关于利用HTML5 Canvas和Three.js库创造炫酷的3D字体视觉效果。通过Canvas的文本绘制功能和Three.js的3D图形处理能力,开发者可以构建出引人入胜的交互式界面,比如这里的金光特效。这种技术...

    html5+three.js彩色液态流动背景动画特效

    6. **CSS**:在本项目中,`css`文件可能用于控制非3D元素的样式,比如文字、按钮等,以及调整整体布局和页面元素的定位,使其与3D背景和谐共存。 7. **JavaScript**:`js`文件包含了核心的动画逻辑和Three.js脚本。...

    vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

    在这个案例中,我们将讨论如何结合Vue和Canvas来创建一个炫酷的时钟倒计时插件,并且这个插件已经发布到了npm,适配Vue 2,方便开发者直接使用。 首先,实现这个炫酷时钟倒计时效果的核心是Canvas的动画原理。通过...

    html5轻量级炫酷js粒子插件particles.JS

    Particles.js就是这样一个利用Canvas API创建炫酷粒子动画的JavaScript库,它为开发者提供了一个简单易用的接口,用于生成自定义的粒子效果。 Particles.js的核心在于它的粒子系统。粒子系统是由大量小粒子组成,每...

    HTML5+WebGL实现炫酷的液态金属波动色差渐变动画特效源码.zip

    Canvas提供了一个二维绘图环境,通过JavaScript可以在这个画布上绘制图像、文字、形状等,实现动态效果。在这个项目中,Canvas被用来绘制液态金属的每一帧画面,通过不断更新图像内容,实现动画效果。 接着,WebGL...

    网页超炫酷背景.rar

    4. 黑客入侵:这种特效通常用于模拟黑客攻击或数据传输场景,通过动态的文字滚动和闪烁,营造紧张刺激的氛围。 5. 雨滴:模拟雨水滴落的效果,通过在页面上随机生成并下落的元素,营造出宁静或忧郁的环境,对网页的...

    粒子效果进度条超炫酷进度条动画源码.zip

    粒子效果是一种流行的视觉技术,通常使用canvas元素或者WebGL来实现。在这个进度条中,粒子可能被随机生成并在屏幕上飞舞,当进度条增加时,粒子会聚集在进度条上,形成一种动态过渡的效果。这种效果既吸引人又可...

    15种HTML5和CSS3炫酷彩色loading加载动画特效.zip

    例如,`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`和`&lt;footer&gt;`等语义化元素帮助定义页面内容结构,而`&lt;canvas&gt;`元素则允许动态图形和交互式内容的创建。此外,HTML5的离线存储功能(如AppCache)和Web Workers API支持后台...

    H5自定义彩色粒子文字特效

    "H5自定义彩色粒子文字特效"正是利用这一特性,实现了炫酷的文字动画,为网页增加互动性和视觉吸引力。 1. HTML5 Canvas基础: HTML5 Canvas是一个二维绘图API,通过JavaScript来控制画布上的图形。开发者可以使用...

    Html5-css特效包

    5. **HTML5 Canvas粒子效果文字动画特效**: 这个特效可能是通过Canvas生成大量粒子,每个粒子代表一个字符,然后通过调整粒子的位置、颜色和大小,形成动态的文字效果。 6. **HTML5 Canvas雷达扫描动画特效**: 雷达...

    js经典特效 网页特效 js做的网页小游戏

    例如,利用CSS3与JS结合,可以创建炫酷的文字流动或打字机效果。 3. **鼠标特效**:鼠标特效是通过监听鼠标的移动、点击等事件,实现特定的反馈效果。比如,鼠标悬停时改变元素样式、鼠标跟随效果、点击触发的动画...

    JavaScript精彩网页特效实例精粹

    本资源“JavaScript精彩网页特效实例精粹”聚焦于通过JavaScript实现的各种炫酷效果,旨在帮助开发者提升网页的用户体验和视觉吸引力。下面将详细探讨其中涉及的知识点: 1. **文本特效**:JavaScript可以改变文本...

Global site tag (gtag.js) - Google Analytics