(抖音上刚学的,还有好多地方做的不完善,后期继续跟进,直接复制代码,后缀名改为:.html ,直接运行就可以看到效果啦!)
黑客帝国代码雨特效-源码 <canvas id="canvas" style="background:black" width="620"
height="340"></canvas> <audio style="display:none; height: 0" id="bg-music"
preload="auto" src="music/黑客帝国.mp3"></audio> <style type="text/css">
body{margin: 0; padding: 0; overflow: hidden;} </style> <script
type="text/javascript"> window.onload = function(){ //获取图形对象 var canvas =
document.getElementById("canvas"); //获取图形的上下文 var context =
canvas.getContext("2d"); //获取浏览器屏幕的宽度和高度 var W = window.innerWidth; var H =
window.innerHeight; //设置canvas的宽度和高度 canvas.width = W; canvas.height = H;
//每个文字的字体大小 var fontSize = 15; //计算列 var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标 var drops = []; //给每一个文字初始化一个起始点的位置 for(var i=0;i<colunms;i++){
drops.push(0); } //运动的文字 var str ="01abcdefghijklmnopqurstuvwxyz";
//4:fillText(str,x,y);原理就是去更改y的坐标位置 //绘画的函数 function draw(){ //让背景逐渐由透明到不透明
context.fillStyle = "rgba(0,0,0,0.05)"; context.fillRect(0,0,W,H); //给字体设置样式
//context.font = "700 "+fontSize+"px 微软雅黑"; context.font = fontSize + 'px
arial'; //给字体添加颜色 context.fillStyle ="green";//随意更改字体颜色 //写入图形中 for(var
i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x =
i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点 if(y >= canvas.height && Math.random() > 0.92){ drops[i]
= 0; } drops[i]++; } }; function randColor(){ var r = Math.floor(Math.random()
* 256); var g = Math.floor(Math.random() * 256); var b =
Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw();
setInterval(draw,33); }; </script>
#效果图

技术
©2020 ioDraw All rights reserved
5G基站功耗,到底有多可怕?python画桃心表白 Unity光照概述JAVA后台如何优雅的输出日志毕生心血!Java架构师20年经验成就这一份Java实战笔记一个MySQL就随随便便吊打你,怎么还敢在简历上写“精通”?开业了!SpaceX首次正式商业载人发射升空,一文详解事件来龙去脉字节跳动抖音后端技术4面题:hashmap+算法+TCP+Linux+GC+数据同步+网络编程等麒麟9000终于发布了,颇为遗憾的是它采用了落后一代的架构阿里P8分享能让MySQL性能提升了数百倍的神操作,从此告别CRUD