1 效果

2 用到的知识点

2.1 什么是 canvas标签?

2.1.1 创建一个画布（Canvas）

2.1.2 使用 JavaScript 来绘制图像

2.1.3 Canvas 坐标

2.1.4 需要用到的canvas 属性和方法详解

2.2 JavaScript floor() 方法

2.3 JavaScript random() 方法

2.4 JavaScript ceil() 方法

2.5 Window setInterval() 方法

2.6 Window innerWidth 和 innerHeight 属性

3 代码实现

1 效果

演示地址：https://www.albertyy.com/2020/7/codeRain.html

2 用到的知识点

2.1 什么是 canvas标签?

<canvas> 是一个HTML5中新增的元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成绘制图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

2.1.1 创建一个画布（Canvas）

<canvas>实例:

<canvas id="mycanvas">你的浏览器不支持canvas</canvas>

<canvas>标签通常需要指定一个id属性 (在脚本中引用), <canvas>标签看起来和 <img> 标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。如果不给 <canvas> 设置 widht、height 属性时，则默认 width为300，height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，会出现扭曲。由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素 <canvas>，在这些浏览器上你应该总是能展示替代内容。支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容。与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来，你可以在HTML页面中使用多个 <canvas> 元素。

2.1.2 使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须通过 JavaScript 来完成。

绘制步骤:

1 找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

2 创建 context 对象：

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3 绘制红色矩形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

fillStyle属性可以设置CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

2.1.3 Canvas 坐标

canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)。上面的 fillRect (0,0,150,75) 方法意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

2.1.4 需要用到的canvas 属性和方法详解

fillStyle 属性：

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

context.fillStyle=color|gradient|pattern;

值	描述
color	绘图填充色的颜色。默认值是 #000000。
gradient	填充绘图的渐变对象（线性或放射性）。
pattern	用于填充绘图的 pattern 对象。

font 属性：

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 css中的font属性相同。

context.font="italic small-caps bold 12px arial";

值	描述
font-style	规定字体样式。可能的值： normal italic oblique
font-variant	规定字体变体。可能的值： normal small-caps
font-weight	规定字体的粗细。可能的值： normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	规定字号和行高，以像素计。
font-family	规定字体系列。
caption	使用标题控件的字体（比如按钮、下拉列表等）。
icon	使用用于标记图标的字体。
menu	使用用于菜单中的字体（下拉列表和菜单列表）。
message-box	使用用于对话框中的字体。
small-caption	使用用于标记小型控件的字体。
status-bar	使用用于窗口状态栏中的字体。

fillText() 方法：

fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。

context.fillText(text,x,y,maxWidth);

参数	描述
text	规定在画布上输出的文本。
x	开始绘制文本的 x 坐标位置（相对于画布）。
y	开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth	可选。允许的最大文本宽度，以像素计。

fillRect() 方法：

fillRect() 方法绘制"已填充"的矩形。默认的填充颜色是黑色。

context.fillRect(x,y,width,height);

参数	描述
x	矩形左上角的 x 坐标。
y	矩形左上角的 y 坐标。
width	矩形的宽度，以像素计。
height	矩形的高度，以像素计。

2.2 JavaScript floor() 方法

floor() 方法返回小于等于x的最大整数。如果传递的参数是一个整数，该值不变。

Math.floor(x)

2.3 JavaScript random() 方法

random() 方法可返回介于 0（包含） ~ 1（不包含）之间的一个随机数。

Math.random()

例如获取 1 到 10 之间的一个随机数我们可以这样写：

Math.floor((Math.random()*10)+1);

2.4 JavaScript ceil() 方法

ceil() 方法可对一个数进行上舍入。如果参数是一个整数，该值不变。ceil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

Math.ceil(x)

2.5 Window setInterval() 方法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作clearInterval() 方法的参数。

setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)

参数	描述
code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

2.6 Window innerWidth 和 innerHeight 属性

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

注意：使用 outerWidth 和 outerHeight 属性获取的是加上工具条与滚动条窗口的宽度与高度。

获取：

window.innerWidth
window.innerHeight

设置:

window.innerWidth=pixels
window.innerHeight=pixels

3 代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>代码雨炫酷效果:公众号AlbertYang</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;width: 100%;overflow: hidden;}</style><script>window.onload = function() {var H = window.innerHeight;var W = window.innerWidth;var mycanvas = document.getElementById('mycanvas');var ctx = mycanvas.getContext('2d');mycanvas.height = H;mycanvas.width = W;var fontsize = 18;var text = [];var lie = Math.floor(W / fontsize);var str = '01'for (var i = 0; i < lie; i++) {text.push(0);}ctx.font = fontsize + 'px 微雅软黑';function draw() {ctx.fillStyle = 'rgba(0,0,0,0.08)'ctx.fillRect(0, 0, W, H);ctx.fillStyle = randColor();for (var i = 0; i < lie; i++) {var index = Math.floor(Math.random() * str.length);var x = Math.floor(fontsize * i)var y = text[i] * fontsizectx.fillText(str[index], x, y);if (y > H && Math.random() > 0.99) {text[i] = 0}text[i]++;}}function randColor() {var r = Math.ceil(Math.random() * 155) + 100;var g = Math.ceil(Math.random() * 155) + 100;var b = Math.ceil(Math.random() * 155) + 100;return 'rgb(' + r + ',' + g + ',' + b + ')'}console.log(randColor())var timer = setInterval(function() {draw();}, 1000 / 30)}</script></head><body data-gr-c-s-loaded="true"><canvas id="mycanvas" height="722" width="1536">你的浏览器不支持canvas</canvas></body>
</html>

黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！相关推荐

vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
Android探索之旅（第十四篇）Android中实现炫酷效果的Demo（持续收录中......）
RangeSeekBar Android简单实现订单模块类APP的物流详情页 Android开发中阴影效果的实现 Android 炫酷多重水波纹 MultiWaveHeader 利用Spannable ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
自定义View实现Canvas炫酷效果
效果: 整个效果分为旋转.扩散聚合.水波纹效果,首先在定义好一些变量后,要先定义一个抽象类SplashState,提供抽象方法drawState供子类实现. /*** 这个抽象类,对外提供drawSt ...
jupyter代码字体大小_你可能并不知道这样定制炫酷的jupyter主题
之前用多了mac,在windows上使用jupyter notebook的时候,总觉得界面不是很舒服,见下图,尤其是字体,看着挺难受的,严重影响了使用的心情哈哈哈.那这样"丑"的界 ...
网页样式——各种炫酷效果及实现代码
1.evanyou 效果-彩带的实现,效果如下注:这个主要用的是 Canvas 画布实现的,点击背景绘制新的图形,代码如下: <canvas id="evanyou" wi ...
60行代码出炫酷效果之 python语音控制电脑壁纸切换
前言大家早好.午好.晚好吖 ❤ ~欢迎光临本文章电脑大家有吧!手大家有吧!今天!! 就由我带领大家用区区60行代码打造一款语音壁纸切换器程序!!! 单纯的桌面有时候会让人觉得单调,那么~ 让大家能 ...
【炫酷秀】仅用4行代码再现《黑客帝国》数字雨，可立即在终端实现！
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 提到<黑客帝国>,字符雨可谓是让人印象深刻. 这种科技感爆棚的特效,你 ...
安卓开发中非常炫的效果集合
安卓开发中非常炫的效果集合这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始从网上收集各种特效资源.下面给大家一些我喜欢的把,附代码,喜欢的看源代码,然后加到自己项目去把!! 一个开源项目网站 ...

黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！

1 效果

2 用到的知识点

2.1 什么是 canvas标签?

2.1.1 创建一个画布（Canvas）

2.1.2 使用 JavaScript 来绘制图像

2.1.3 Canvas 坐标

2.1.4 需要用到的canvas 属性和方法详解

2.2 JavaScript floor() 方法

2.3 JavaScript random() 方法

2.4 JavaScript ceil() 方法

2.5 Window setInterval() 方法

2.6 Window innerWidth 和 innerHeight 属性

3 代码实现

黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！相关推荐

最新文章

热门文章