【Canvas与艺术】黑客帝国下坠字幕特效

最新推荐文章于 2024-08-15 15:16:01 发布

普兰店拉马努金

最新推荐文章于 2024-08-15 15:16:01 发布

阅读量514

点赞数 15

分类专栏：艺术文章标签： canva可画 html5

本文链接：https://blog.csdn.net/River_Sun/article/details/136813857

版权

艺术专栏收录该内容

110 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5canvas和JavaScript实现一个带有半透明蒙版的黑客帝国风格字幕下坠效果，通过逐行显示文字并控制其纵坐标下移来模拟字符流动效果。

摘要由CSDN通过智能技术生成

【关键点】

字幕下坠即控制文字的纵坐标不断下移，而半透明蒙版是尾迹字残留的关键。

【效果】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>黑客帝国下坠字幕特效</title>
     </head>

     <body οnlοad="draw()">
        <canvas id="myCanvas" width="100px" height="100px" style="border:0px dashed black;">
            出现文字表示您的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// 常量画布宽
const Width=1200;

// 常量画布高
const Height=512;

// 文本字体大小
const FontSize=18;

// 绘图上下文
var context;

// 舞台对象
var stage;

// 肇始函数
function draw(){
    // Canvas
    var canvas=document.getElementById('myCanvas');    
    canvas.width=Width;
    canvas.height=Height;    
    context=canvas.getContext('2d');    
    
    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
};

// 循环播放动画
function animate(){    
    stage.update();
    stage.paintBg(context);
    stage.paintFg(context);     

    if(true){
        // 延时执行以免下坠太快
        const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
 
        delay(90).then(() => {
            window.requestAnimationFrame(animate);
        });        
    }
}

// 舞台类
function Stage(){
    // 此数组存储了出现文字的位置
    this.drops=new Array();
    
    // 初始化粒子
    this.init=function(){
        var colCnt = Math.floor(Width / FontSize) ;// 算能容纳多少列
        for(let i = 0;i<colCnt ; i++){
            var item={};

            // x就是所在列
            item.x=i*FontSize;
            // y取随机数
            item.y=Math.random()*Math.floor(Height/FontSize)*FontSize;        
            
            this.drops.push(item);
        }
    }

    // 更新粒子的位置
    this.update=function(){
        this.drops.forEach(function (item, i) {
            // 下坠靠增加纵坐标
            item.y+=FontSize;

            // 越界归原
            if(item.y>Height){
                item.y=1*FontSize;
            }
        })        
    };

    //  画背景
    this.paintBg=function(ctx){
        // ctx.fillStyle="black"; // 如果只是填充黑色，只能看到单个字符下落
        ctx.fillStyle = "rgba(0, 0, 0, 0.07)";// 如果加上半透明蒙层，则出现了残影效果，这句代码是黑客帝国字符流下坠效果的关键所在，透明度越小，字符越密集
        
        ctx.fillRect(0,0,Width,Height);

        // 作者标识
        ctx.fillStyle="yellow";
        ctx.font="12px Arial";
        ctx.fillText("黑客帝国字母特效 by:逆火",Width-160,Height-20);
    };

    // 画前景
    this.paintFg=function(ctx){
        this.drops.forEach(function (item, i) {
            ctx.fillStyle = "green";  //文字颜色
            ctx.font = FontSize + "px consolas";

            var text=getText();
            ctx.fillText(text,item.x, item.y);
        })    
    };
}

// 取显示的文字
function getText(){
    var sentence="富强民主文明和谐自由平等公正法治爱国敬业诚信友善";
    var n=sentence.length;
    var i=Math.random()*n;
    return sentence.charAt(i);
}

/*----------------------------------
若能安居乐业，谁愿颠沛流离
----------------------------------*/
//-->
</script>