使用canvas与js实现黑客帝国代码瀑布流
程序员文章站
2024-03-18 20:16:10
...
这篇博文仅记录用，无任何技术知识阐述。
分析
1.技术分析：
canvas绘制文字的函数 fillText("text",x,y) 可以在某个坐标绘制出文字。
2.瀑布需求：
（1）形象（即拥有瀑布的属性，由上至下，无间断，错落有致）
（2）美观
设计
将瀑布分为多条小瀑布；每条小瀑布包含多个水滴（内容）；每条小瀑布下落速度不同；水滴（内容）的速度、大小相同，小瀑布下密上疏。
实现
对象：
瀑布属性值：密度（小瀑布数量）
小瀑布属性值：长度（小瀑布内容数量），下落速度，大小（小瀑布内容大小）
方法：
初始化，定时循环
因当时是先写的代码，分析做的不到位，所以这份代码写出来可读性太低
<html>
<body>
<canvas id="myCanvas" style="position:absolute;top:0;left:0;background-color:#000;"></canvas>
</body>
<script type="text/javascript">
//瀑布流
var fallArr = new Array();
//瀑布流颜色
var fallColor = function(a){return "rgba(255,255,150,"+a+")"};
//瀑布流字体
var fallFont = " console";
var fallFontSize = 19;
//瀑布下落速度
var speed = 10;
//瀑布长度(瀑布内容数量)
var cd = 30;
//瀑布密度(横向)
var density = 150;
//画布大小
var canvas_w = document.documentElement.clientWidth || window.innerWidth || screen.availWidth || screen.width;
var canvas_h = document.documentElement.clientHeight || window.innerHeight || screen.availHeight || screen.height;
var canvas = null;
var c = null;
var x;
//全局初始化
function init(){
//瀑布流初始化
for(var i=0;i<density;i++){
fallArr[i] = {speed:speed*Math.random(),strArr:[],y:0};
//瀑布流内容初始化
for(var j=0;j<cd;j++){
fallArr[i].strArr[j] = Math.random()>0.5?0:1;
}
}
//画布初始化
canvas = document.getElementById("myCanvas");
canvas.width = canvas_w;
canvas.height = canvas_h;
//画笔初始化
c = canvas.getContext("2d");
}
//画瀑布
function draw(c){
for(var j=0;j<fallArr.length;j++){
//瀑布横向位置（平均分布）
x = canvas_w/density*j;
//各条瀑布流的纵向位置
fallArr[j].y++;
for(var i=0;i<fallArr[j].strArr.length;i++){
//瀑布内容渐变
c.fillStyle= i<3&&Math.random()>0.8? "rgba(255,255,0,"+(1-1/fallArr[j].strArr.length*i)+")" : fallColor(1-1/fallArr[j].strArr.length*i);
//重新计算瀑布下落速度（个别瀑布流下落过慢）
fallArr[j].speed = fallArr[j].speed < 2 ? Math.random()*speed : fallArr[j].speed;
c.fillText(fallArr[j].strArr[i],x,fallArr[j].speed*fallArr[j].y-i*fallFontSize);
}
//瀑布流下落到底重新下落
if(fallArr[j].speed*fallArr[j].y-i*fallFontSize>canvas_h){
fallArr[j].y=0;
}
}
}
window.onload = function(){
init();
//瀑布循环下落
var timer = window.setInterval(function(){
canvas.height=canvas_h;
c.lineWidth=1;
c.font=fallFontSize+"px"+fallFont ;
draw(c);
},5)
}
</script>
</html>