❤The Matrix黑客帝国屏保！！！❤HTML实现及其傻瓜安装你值得拥有

您所在的位置：网站首页 › 黑客壁纸 › ❤The Matrix黑客帝国屏保！！！❤HTML实现及其傻瓜安装你值得拥有

❤The Matrix黑客帝国屏保！！！❤HTML实现及其傻瓜安装你值得拥有

2023-09-01 07:16| 来源: 网络整理| 查看: 265

最近传出了黑客帝国4（The Matrix 4）的消息，真的是激动啊！！！

《黑客帝国4：重生》（The Matrix: Resurrections）将于2021年12月22日上映。官网的预告片更是震撼，据说每个人的选择，看到的预告片都不一样，具体你可以进去试一试哟~ 在这里插入图片描述

地址：https://thechoiceisyours.whatisthematrix.com/cn/

小时候看前三部的时候始终没看懂，那些人为什么了能飞过去飞过来的，以为是超人还是什么超级英雄，上大学后，再回过头来看，基本就能看懂了，不经感叹道，这是在1999年拍出来的啊！！！

The Matrix

是不是觉得电影里的屏保很炫酷，同样你也可以拥有！

然后就小研究了一下，先说下HTML实现。

先在桌面上建立一个文本文件，如下图在这里插入图片描述

（名字随便取）然后将文件的后缀名改为（.html）在这里插入图片描述

然后通过记事本打开，再复制下面的代码，直接保存即可黑客帝国-代码雨 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 //让背景逐渐由透明到不透明 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 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); }; body{margin: 0; padding: 0; overflow: hidden;}

像下面这样在这里插入图片描述保存完毕之后。