数字雨（Javascript使用canvas绘制Matrix，效果很赞哦）

最新推荐文章于 2021-02-10 15:15:38 发布
最新推荐文章于 2021-02-10 15:15:38 发布
阅读量159 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/dcrenl/p/3259558.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    body{
        overflow: hidden;
        margin: 0;
    }    
</style>
</head>
<body>

<canvas id="q"></canvas>
<script>
var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');
var draw = function () {
  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
  q.getContext('2d').fillRect(0,0,width,height);
  q.getContext('2d').fillStyle='#0F0';
  letters.map(function(y_pos, index){
    text = String.fromCharCode(34+Math.random()*33);
//    text = String.fromCharCode(3e4+Math.random()*33);//显示中文
    x_pos = index * 10;
    q.getContext('2d').fillText(text, x_pos, y_pos);
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
    q.getContext('2d').fillStyle='#'+letters[index];
  });
};
setInterval(draw, 33);
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/dcrenl/p/3259558.html

QQQ2556338777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3D模型导入 CanvasMatrix.js引擎 demo(一)
03-21
NULL 博文链接：https://wjlgryx.iteye.com/blog/965644
用javascript实现数字雨
sinolzeng的专栏
02-11 562
数字雨这个东西，无数人写过了，我这个是上课无聊写的版本，纯属娱乐，没有经过性能优化的版本。 和别人不太一样的是我这个版本用了ascii码，数字会变化，就是性能不佳，懒得优化。 和之前的太阳系模型、小人互殴系统一样都是拿来伪装成动态壁纸的。 <!DOCTYPE html> <html> <head> <title>number rain</title> </head> <body style='background-col
原生js,通过canvas实现数字雨
ramosTears123的博客
03-24 459
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ border: 1px ...
js仿黑客帝国文字数字雨效果
weixin_34126215的博客
09-12 523
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;黑客帝国文字下落&lt;/title&gt; &lt;style&gt; html, body {margin:0; padding:0; background-co
JavaScript 字符雨
司马懿的西山居
01-12 1598
<html> <head> <meta charset="utf8"/> <title>字符雨</title> <style> body { color:white; background-color:black; overf
JavaScript实现使用Canvas绘制图形的基本教程
10-21
本篇文章主要介绍了JavaScript实现使用Canvas绘制图形的基本教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
JavaScript html5 canvas绘制时钟效果
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
JavaScript使用canvas绘制随机验证码
11-20
本文实例为大家分享了使用canvas绘制随机验证码的具体代码，供大家参考，具体内容如下 理论基础： 掌握使用canvas绘制线条和圆形以及绘制文字 实现思路： 先构建一个画布，设置一定的宽高（在canvas中设置宽高和在...
JavaScript html5 canvas绘制时钟效果(二)
10-22
主要介绍了JavaScript html5绘制时钟效果的相关资料，使用HTML5的canvas标签和Javascript脚本，模拟显示了一个时钟，感兴趣的小伙伴们可以参考一下
在网页里实现代码雨效果，大加来看看
09-08
在网页里显示代码雨，汉字滚动显示，很不错的，希望大家喜欢
矩阵数字雨 jQuery特效.zip
07-04
矩阵数字雨 jQuery特效是一款类似黑客0和1代码的矩阵滚动效果。
黑客帝国中数字雨效果 很逼真 很强大
05-03
值得你下载的东西 对C++编程帮助很大 其中实现对window桌面的控制 实现了貌似黑客入侵的效果
使用canvas实现黑客帝国数字雨效果
11-21
使用canvas实现黑客帝国数字雨 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { margin: 0;
HTML5数字雨代码
02-25
模仿黑客帝国数字雨效果，采用HTML5画图功能
html5 canvas矩阵转换
01-26
html5 canvas矩阵转换
javascript 矩阵_JavaScript问题解决器：旋转图像矩阵
weixin_26750481的博客
09-11 341
javascript 矩阵It’s been a while since I’ve written a blog about a technical problem I’ve solved. The truth is I haven’t been grinding on HackerRank or LeetCode as much as I used to, and all of my time ...
浅谈canvas的matrix变换
hfc123hfc123的博客
05-08 1455
canvas的matrix
用canvas 实现《Matrix》(黑客帝国)中 电脑屏幕效果
sinat_33917657的博客
02-21 2778
这是我第一次在博客上写文章了。其实我是一名少数民族--维吾尔族，名字名字很长，Abduwahid,平时大家叫我阿卜杜。最近我在一个培训机构学web前端，当我接触到canvas的时候无比的兴奋，可以用代码画图，HTML5真TMD越来越强悍了。我做了一个模拟冒气泡的动态图时，突发灵感，就做了那个《黑客帝国》中的电脑屏幕中一条条绿线。也就是如下图：                          
Canvas的常用api简介——变换，状态保存，离屏缓冲
让技术为我所用
02-10 538
文章目录正文1、绘制几何图形，文本，位图等2、位置，形状变换等平移操作缩放操作旋转操作倾斜操作切割操作矩阵3、状态保存和恢复示例一示例二4、离屏缓冲相关推荐 正文 1、绘制几何图形，文本，位图等 void drawBitmap(Bitmap bitmap,float left,float top,Paint paint):在指定坐标绘制位图。 void drawLine(float startX,float startY,float stopX,float stopY,Paint paint):根据给定
HTML5 canvas 骇客帝国文字效果
最新发布
07-21
要实现骇客帝国中的文字效果，可以借助HTML5 canvas和一些JavaScript代码来实现。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> canvas { background-color: #000; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 获取canvas元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 定义文字样式 const fontSize = 16; ctx.font = `${fontSize}px Courier`; ctx.fillStyle = '#0F0'; // 定义文本内容 const text = 'Welcome to the Matrix'; // 定义文本的起始位置 let x = (canvas.width - ctx.measureText(text).width) / 2; let y = canvas.height / 2; // 定义绘制文本的间隔 const interval = 100; // 定义控制参数 let currentCharIndex = 0; let lastTime = performance.now(); function draw() { // 计算时间间隔 const currentTime = performance.now(); const deltaTime = currentTime - lastTime; // 控制文字逐个显示的速度 if (deltaTime > interval) { lastTime = currentTime; // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制文字 for (let i = 0; i < currentCharIndex; i++) { const char = text.charAt(i); ctx.fillText(char, x, y + (i * fontSize)); } // 更新当前字符索引 currentCharIndex++; // 检测是否显示完所有字符 if (currentCharIndex > text.length) { currentCharIndex = 0; } } // 递归调用draw函数 requestAnimationFrame(draw); } // 启动动画 draw(); </script> </body> </html> ``` 这段代码会在页面上创建一个全屏的canvas元素，并通过逐个显示字符的方式实现骇客帝国中的文字效果。你可以根据需要修改文本内容、样式和动画参数来实现自己想要的效果。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值