使用canvas与js实现黑客帝国代码瀑布流

最新推荐文章于 2024-04-09 18:03:12 发布

pwk795

最新推荐文章于 2024-04-09 18:03:12 发布

阅读量682

点赞数

文章标签： canvas js

本文链接：https://blog.csdn.net/pwk795/article/details/80213738

版权

这篇博文仅记录用，无任何技术知识阐述。

分析

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>

pwk795

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用canvas与js实现黑客帝国代码瀑布流

这篇博文仅记录用，无任何技术知识阐述。分析 1.技术分析： canvas绘制文字的函数 fillText("text",x,y) 可以在某个坐标绘制出文字。 2.瀑布需求：（1）形象（即拥有瀑布的属性，由上至下，无间断，错落有致）（2）美观设计将瀑布分为...
复制链接

扫一扫