黑客帝国文字雨特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

8 29 10



特效描述:黑客帝国 文字雨。js黑客帝国流星雨特效

代码结构

1. HTML代码

<canvas id="canvas"> 您的浏览器不支持canvas标签,请您更换浏览器 </canvas>
<script>
		var canvas=document.getElementById("canvas");
		var can=canvas.getContext("2d");
		var s=window.screen;//获取屏幕
		var w=canvas.width=s.width;//获取屏幕宽度
		var h=canvas.height=s.height;//获取屏幕高度
		can.fillStyle=color2();
		var words = Array(256).join("1").split("");
		//设置一个包含256个空元素的数组,join("1")用来把数组里的元素拼接成字符串,split("")过滤掉数组里的空元素
		setInterval(draw,50);
		// can.font="30px 微软雅黑"; //只设置一个不生效,一定要两个属性都设
		// //绘制实心的文本:绘制的文本,文本的坐标x,文本的坐标y
		// can.fillText("黑客帝国",100,100);
		// // setInterval(draw,50);
		function draw(){
			//can.fillRect()画一个实心矩形:坐标x,坐标y,矩形宽,举行高
			can.fillStyle='rgba(0,0,0,0.05)';
			can.fillRect(0,0,w,h);
			can.fillStyle=color2();
			words.map(function(y,n){
				text=String.fromCharCode(Math.ceil(65+Math.random()*57)); //转换为键盘上值
				x = n*10;
				can.fillText(text,x,y)
				words[n]=( y > 758 + Math.random()*484 ? 0:y+10 );
			});//数组元素的一个映射
		}
		//获取随机颜色,三种方法
		function color1(){
			var colors=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
			var color="";
			for( var i=0; i<6; i++){
				//Math.random()产生一个0-1之间的小数
				var n=Math.ceil(Math.random()*15);
				color += "" + colors[n];
				// console.log(color);
			}
			return '#'+color;
		}
		function color2(){
			var color = Math.ceil(Math.random()*16777215).toString(16); 
			// for( var i=color.length; i<6; i++ ){
			// 	color = '0'+color;
			// }
			while(color.length<6){
				color = '0'+color;
			}
			return '#'+color;
		}
		function color3(){
			return "#" + (function(color){
				return new Array(7-color.length).join("0")+color;
				//神奇的方法,总共字符串有6位,如果只产生了3位,则前面应该补三个0,在长度为7-3=4的空数组中利用join插入0,则为['',0,'',0,'',0,''],刚好三个0补在前面
			})((Math.random()*0x1000000 << 0).toString(16))
			// << 0 也是一种取整的方法
		}
	</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到