canvas 字幕瀑布流

之前看过一次canvas的字幕瀑布流，刚好最近看到canvas这块，所以重新复习一下。

首先，新建一个canvas标签

<canvas id="canvas">浏览器不能识别canvas</canvas>

然后就是通过js来实现动画。字幕瀑布流是由多行字幕组成的，那么每行字幕都有些什么呢？每行字幕都有一组字母组成，字母的数量就是窗体宽度除以字体大小。总共有多少列就算出来了。

  var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    //制作全屏
    canvas.height = window.innerHeight;
    canvas.width = window.screen.width;


    //字符数组
    var code = "qwertyuiopasdfghjklzxcvbnm1234567890";
    //将字符串转换为一个数组中的单个字符
    code = code.split("");
    var font_size = 20;
    var columns = canvas.width/font_size; //雨的列数
    //每列的一个数组
    var drops = [];
    //下面是×坐标
    //1 = y 在下降（最初是相同的）
    for(var x = 0; x < columns; x++)
        drops[x] = 1;


    //画
    function draw()
    {
//黑BG的帆布
//半透明BG显示轨迹
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = "#FF0C66"; //字体颜色
        ctx.font = font_size + "px arial";
//循环字体
        for(var i = 0; i < drops.length; i++)
        {
//随机汉字打印
            var text = code[Math.floor(Math.random()*code.length)];
//x = i*font_size, y = value of drops[i]*font_size
            ctx.fillText(text, i*font_size, drops[i]*font_size);

//在屏幕上划线后，把它的顶部随机发送到顶部
//将一个随机性添加到复位中，使分散在轴上的下降
            if(drops[i]*font_size > canvas.height && Math.random() > 0.975)
                drops[i] = 0;

//增加的Y坐标
            drops[i]++;
        }
    }

    setInterval(draw, 30);

 

 

转载于:https://my.oschina.net/u/3042592/blog/1580620