canvas+js实现数字雨特效【字符下落特效】

更新日期: 2020-03-17阅读: 4k标签: 特效

完整代码及思路

此段代码通过Canvas元素实现了电影《黑客帝国》中进入Matrix的终端界面的一个动画效果。  

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数字雨</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: black;
            overflow: hidden;
        }
    </style>
    <script>
        window.onload=function(){
        var drCav = document.getElementById("digitalRain");
        
        /*将画布大小设置为窗口文档显示区大小*/
        var width = window.innerWidth;
        var height = window.innerHeight;
        drCav.width = width;
        drCav.height = height;
    
        var fontsize = 16;                          //数字字体大小
        var columns = Math.ceil(width / fontsize);  //列数(向上取整)
        var dropLine = [];                          
        for (var i = 0; i < columns; i++) {
            dropLine[i] = 0;
        }
        
        /*Run*/
        if(drCav.getContext){
            var ctx = drCav.getContext("2d");
            timer = setInterval(draw, 30);
        }

        function draw() {
            ctx.fillStyle = "rgba(0, 0, 0, 0.05)";   //设置透明度,逐渐覆盖之前的数字
            ctx.fillRect(0, 0, width, height);       //填充画布
            
            ctx.fillStyle = "#00FF00";               
            ctx.font = fontsize + "px Simsun";
            for (var i = 0; i < columns; i++) {
                var figure = Math.floor(Math.random()*10);  //生成0~9的伪随机数
                
                /*绘制数字(核心部分)*/
                ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);
                if (dropLine[i] * fontsize > height || Math.random() > 0.95){
                    dropLine[i] = 0;
                }
                dropLine[i]++;
            }
        }
    }
    </script>
</head>
<body>
    <canvas id="digitalRain">
    </canvas>
</body>
</html>

部分函数和细节讲解

①Math.round(),Math.ceil(),Math.floor()

上面三个函数参数均可以为一个数字,不同之处在于:

Math.round():四舍五入
Math.ceil():向上取整
Math.floor():向下取整  

②Math.random()

返回一个在[0,1)范围的随机数  

var columns = Math.ceil(width / fontsize); //列数(向上取整)
定义列数时选择使用Math.ceil(),让宽度尽量填充。(右侧空一小部分会很难看...)
var figure = Math.floor(Math.random()*10); //生成0~9的伪随机数
这里使用Math.ceil()向下取整,避免生成10。(一个两位的数字在数字雨里会很突出...)

③绘制数字部分

用dropLine这个列表来记录绘制过程,dropLine[i]的意义是表示在第i列,第dropLine[i]行绘制!

ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);

filltext()是canvas中的方法,这里的三个参数分别对应:内容,横坐标,纵坐标。
坐标是相对于画布的,此处相当于将数字figure绘制到坐标(i * fontsize, dropLine[i] * fontsize)

if (dropLine[i] * fontsize > height || Math.random() > 0.95){
 dropLine[i] = 0;
}
dropLine[i]++;

当纵坐标超出高度,回至第一行,并设置Math.random()>0.95让其有概率自己回到第一行,这样的数字雨才有感觉~


链接: https://fly63.com/article/detial/8205

也许vue+css3做交互特效更简单

关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。

纯 CSS 创作出平滑的层叠海浪特效

这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。定义 dom,容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果

js实现图片放大镜特效

在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读

只需三步,实时多边形折射

在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。

纯CSS3仿网易云孤独星球特效

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了

原生JS实现旋转木马轮播图特效

当用户点击左右箭头时,让数组进行相应变化(如果点击右箭头,就删除数组最后那个元素,把它添加到最前边;如果点击左箭头,就删除数组最前边那个元素,把它添加到最后边),改变完数组再调用一下move()函数(让图片轮播)

纯css3实现二维码扫描特效

第一步,实现网格背景:第二部实现扫码线以及渐变背景特效,四角特效就是四个宽高相等的正方形,分别设置边框即可。设置扫描动画

纯js时钟特效

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

css按钮悬停特效

本文给大家介绍几款按钮的鼠标悬停效果,是纯CSS实现的,鼠标移上按钮后,按钮会随之发生变化。这种效果使用非常广泛,非常多的网页都用上了这个效果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!