使用canvas绘制数字雨

话不多说上代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>数字雨</title><style>body{margin: 0;padding: 0;background-color: black;overflow: hidden;}</style><script>window.onload=function(){var drCav = document.getElementById("digitalRain");/*将画布大小设置为窗口文档显示区大小*/var width = window.innerWidth;var height = window.innerHeight;drCav.width = width;drCav.height = height;var fontsize = 16;                          //数字字体大小var columns = Math.ceil(width / fontsize);  //列数（向上取整）var dropLine = [];                          for (var i = 0; i < columns; i++) {dropLine[i] = 0;}/*Run*/if(drCav.getContext){var ctx = drCav.getContext("2d");timer = setInterval(draw, 30);}function draw() {ctx.fillStyle = "rgba(0, 0, 0, 0.05)";   //设置透明度，逐渐覆盖之前的数字ctx.fillRect(0, 0, width, height);       //填充画布ctx.fillStyle = "#00FF00";               ctx.font = fontsize + "px Simsun";for (var i = 0; i < columns; i++) {var figure = Math.floor(Math.random()*10);  //生成0~9的伪随机数/*绘制数字(核心部分)*/ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);if (dropLine[i] * fontsize > height || Math.random() > 0.95){dropLine[i] = 0;}dropLine[i]++;}}}</script>
</head>
<body><canvas id="digitalRain"></canvas>
</body>
</html>

使用canvas绘制数字雨相关推荐

canvas黑客帝国数字雨背景 html+css+js
效果(完整源码在最后): [html+css+js]黑客帝国数字雨源码分享可拿来作页面背景制作: 定义canvas标签: <canvas id="canvas">& ...
canvas+gif.js打造自己的数字雨头像
前言昨天是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像?.你看我的头像牛逼不.今天介绍一个小demo,上传一个静态头像,就能得到一个动态的数字雨头像 ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
用Canvas绘制一个数字键盘
Hello啊老铁们,这篇文章还是阐述自定义View相关的内容,用Canvas轻轻松松搞一个数字键盘,本身没什么难度,这种效果实现的方式也是多种多样,这篇只是其中的一种,要说本篇有什么特别之处,可能就是 ...
用easyx画电子钟_Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
【炫酷秀】仅用4行代码再现《黑客帝国》数字雨，可立即在终端实现！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
4行代码再现《黑客帝国》数字雨，在终端实现的那种
十三发自凹非寺量子位报道 | 公众号 QbitAI 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你是否也想来一套? 这个,可以有. 最近,名叫akinomy ...
HTML5实战——canvas 绘制钟表
用canvas绘制了一个钟表,废话不多说了,直接上代码吧.效果图如下: <!DOCTYPE html> <html> <head> <meta charset ...
C语言项目：黑客帝国之数字雨
编辑相信大家看过许许多多的关于计算机黑客.骇客.人工智能.AI方面的电影,每当黑客入侵某个五角大楼,某个网站时,都会出现这样一幅画面: 编辑然后就轻而易举的成功入侵夺取管理员权限了,这时候的我们, ...

使用canvas绘制数字雨

使用canvas绘制数字雨相关推荐

最新文章

热门文章