通过Canvas画布制作黑客帝国背景

极客李华

已于 2023-01-07 12:50:45 修改

阅读量331

点赞数 2

分类专栏： CSS常见小案例文章标签：前端

于 2023-01-07 12:45:21 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/128589830

版权

CSS常见小案例专栏收录该内容

22 篇文章 13 订阅

订阅专栏

通过Canvas画布制作黑客帝国背景

电影介绍

先推荐一下这部电影
在这里插入图片描述
《黑客帝国》是由华纳兄弟公司发行的系列动作片，该片由沃卓斯基兄弟执导，基努·里维斯、凯莉·安妮·莫斯、劳伦斯·菲什伯恩等主演。影片已上映的有四部，为《黑客帝国》（1999年3月31日上映）、《黑客帝国2：重装上阵》（2003年5月15日上映）《黑客帝国3：矩阵革命》（2003年11月5日上映），《黑客帝国4：矩阵重启》（2021年12月22日在北美上映、2022年1月14日中国上映）
影片讲述了一名年轻的网络黑客尼奥发现看似正常的现实世界实际上是由一个名为“矩阵”的计算机人工智能系统控制的，尼奥在一名神秘女郎崔妮蒂的引导下见到了黑客组织的首领墨菲斯，三人走上了抗争矩阵征途的故事。

《黑客帝国》
在矩阵中生活的一名年轻的网络黑客尼奥（基努·里维斯饰）发现，看似正常的现实世界实际上似乎被某种力量控制着，尼奥便在网络上调查此事。而在现实中生活的人类反抗组织的船长墨菲斯（劳伦斯·菲什伯恩饰），也一直在矩阵中寻找传说的救世主，就这样在人类反抗组织成员崔妮蒂（凯莉·安·摩丝饰）的指引下，两人见面了，尼奥也在墨菲斯的指引下，回到了真正的现实中，逃离了矩阵，这才了解到，原来他一直活在虚拟世界当中。

《黑客帝国2：重装上阵》
实际上，整个《重装上阵》是尼奥探寻自己使命背后真相的过程，他要为自己的行动寻找一个可以接受的理由。在上集打败史密斯（雨果·维文饰）、救出墨菲斯之后，尼奥随同亲密爱人崔妮蒂和其他战友一起，乘坐Nebuchadnezzar号飞船返回地球上最后一个人类据点——锡安基地。在那里，他们和其他自由战士们聚集到了一起。就在这时，母体系统决定“先下手为强”，派遣了为数250000的电子乌贼大军，开始进攻锡安基地，微弱的基地防守力量根本不足以对抗如此强大的机甲兵团，看来人类最后的香火也岌岌可危。可是，“母体取经”的道路注定是凶险多端的：在寻找母体系统内唯一知道系统弱点的“制钥者”的过程中，尼奥、墨菲斯和崔妮蒂遇到了前所未有的困难。

《黑客帝国3：矩阵革命》
在《黑客帝国》系列电影最后一集中，延续上集《黑客帝国2：重装上阵》的故事，并揭晓机器与人类的最终命运。面对如潮的电子乌贼，人类城市危在旦夕，墨菲斯和崔妮蒂等欲与入侵者决一死战。此时，“救世主”尼奥的身体和思想却意外分离，后者再度陷入到“母体”中。墨菲斯和崔妮蒂也不得不回到“母体”和守护天使一起寻找他。

网页效果展示

这里有两个版本的，一个是跟电影相似的，属于背景文字为日语，另一个的话就是01010101的信息。
在这里插入图片描述

在这里插入图片描述

然后具体实现代码

文件结构
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>
    <canvas id="fb"></canvas>
</body>

</html>

script.js

根据注释可以来自定义背景所需要展示的内容。

var canvas = document.getElementById("canvas")
canvas.width = window.innerWidth
canvas.height = window.innerHeight
var ctx = canvas.getContext("2d")
var particlesArray = []
var fontsize = 24
var str = "01010110110101010101010101010101010110101010101010010101010"  // 可以通过修改这里，来修改背景图片的现实内容
ctx.font = fontsize + "px Arial"

var count = 200

var fb = document.getElementById("fb")
fb.width = window.innerWidth
fb.height = window.innerHeight
var ctxfb = fb.getContext("2d")
for (var i = 0; i < fb.height; i += 3) {
    ctxfb.moveTo(0, i)
    ctxfb.lineTo(canvas.width, i)
    ctxfb.stroke()
}
class Particle {
    constructor() {
        this.x = (Math.random() * (canvas.width / 24) | 0) * 24
        this.y = Math.random() * canvas.height
        this.size = fontsize
    }
    update() {
        this.y += this.size
    }
    draw() {
        ctx.fillStyle = "green"
        ctx.fillText(str[Math.random() * str.length | 0], this.x, this.y)
    }
}

function init() {
    for (var i = 0; i < count; i++) {
        particlesArray.push(new Particle())
    }
}
init()

function draw() {
    ctx.globalAlpha = 0.1
    ctx.fillStyle = "rgb(0,0,0)"
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.globalAlpha = 1
    for (var i = 0; i < particlesArray.length; i++) {
        particlesArray[i].update()
        particlesArray[i].draw()
        if (particlesArray[i].y > canvas.height) {
            particlesArray[i].y = 0
            particlesArray[i].x = (Math.random() * (canvas.width / 24) | 0) * 24
        }
    }
}
setInterval(draw, 100)

style.css

css样式布局文件。

* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
    display: flex;
    width: 100%;
    height: 100vh;
}

canvas {
    width: 100%;
    height: 100%;
    position: absolute;
}