Canvas实现黑客帝国字符雨_canvas画字符雨-程序员宅基地

利用Canvas的fillText(),隔一定时间在画布上作画

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden
        }
    </style>
</head>

<body>
    <canvas id='canvas' style='background:#111'></canvas>
    <script>
        canvas = document.getElementById('canvas')
        context = canvas.getContext('2d')

        //定义画布大小，字体，颜色
        var W = window.innerWidth
        var H = window.innerHeight
        canvas.height = H
        canvas.width = W
        var fontSize = 16
        var colunms = Math.floor(W / fontSize)
        var drops = [] //drops中是每列字母y坐标的倍数
        for (let i = 0; i < colunms; i++) {
            drops.push(1000)
        }
        var str = 'qwertyuiopasdfghjklmnbvcxzQWERTYUIOPLKJHGFDSAZXCVBNM0123456789'

        function draw() {
            //每次draw()，设置透明度可以显示上一次draw()的图像，形成残影
            context.fillStyle = 'rgba(0, 0, 0, 0.05)'
            context.fillRect(0, 0, W, H)
            context.font = '1000 ' + fontSize + 'px Consolas'
            context.fillStyle = '#00cc33'
            context.textAlign = 'center'
            for (let i = 0; i < colunms; i++) {
                let index = Math.floor(Math.random() * str.length)
                let x = i * fontSize
                let y = drops[i] * fontSize
                //在x,y坐标中随机画str中的一个字符
                context.fillText(str[index], x, y)
                //y大于画布高度后，设置随机数，规定是否从顶点重新开始画
                if (y >= H && Math.random() > 0.99) {
                    drops[i] = 0
                }
                //每次draw()后，倍数加一，下一个字符画在它的下方
                drops[i]++
            }
        }

        window.onload = function () {
            setInterval(draw, 50)
        }
    </script>
</body>

还可以设置字体的随机颜色，使动画更绚丽

添加randColor函数，并更改draw

function draw() {
            context.fillStyle = 'rgba(0, 0, 0, 0.05)'
            context.fillRect(0, 0, W, H)
            context.font = '1000 ' + fontSize + 'px Consolas'
            context.textAlign = 'center'
            for (let i = 0; i < colunms; i++) {
                context.fillStyle = randColor()
                let index = Math.floor(Math.random() * str.length)
                let x = i * fontSize
                let y = drops[i] * fontSize
                context.fillText(str[index], x, y)
                if (y >= H && Math.random() > 0.99) {
                    drops[i] = 0
                }
                drops[i]++
            }
        }

        function randColor() {
            let r = Math.floor(Math.random() * 256)
            let g = Math.floor(Math.random() * 256)
            let b = Math.floor(Math.random() * 256)
            return `rgb(${r},${g},${b})`
        }

本文链接：https://blog.csdn.net/qq_42761735/article/details/84632909

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

skywalking_skywalking重启-程序员宅基地

文章浏览阅读1.8k次。skywalking和agent_skywalking重启

RC5T620-1017电源管理IC规格书/datasheet_rc5t620 1017-程序员宅基地

文章浏览阅读665次。RC5T620-1017是用于GPS-PND/MID和智能电话的电源管理IC，它集成了五个高效降压DCDC转换器，十二个低压降稳压器，电源控制逻辑，锂离子电池充电器，I2C总线接口，电压检测，热关断等。RC5T620结构图：特征：1.系统I2C总线接口@ 3.4MHz和400kHz检测器功能（系统/ IO /电池电压检测器，UVLO）热关断功能看门狗定时器打开按键输入以启动系统CPU的上电复位输出通过OTP灵活的开机/关机顺序通过OTP灵活的DCDCx和LDOx默认开/关控制_rc5t620 1017

喜马拉雅 xm文件转m4a_音频转文字这种刚需，我用python写了个软件，免费不限时...-程序员宅基地

文章浏览阅读837次。最新独立版本，bug更少，支持格式更多，欢迎体验。王华：音频转文字工具，完全免费，自己用Python写的！zhuanlan.zhihu.com一、需求分析：1、音频转文字：目前市面上的音频转文字大多收费。音频转文字的需求是：上传一段音频，直接识别成文字，对于会议记录的比较好使，注意不是实时的语音识别。 2、文字转语音：转的语音不要太生硬。3、截图文字识别（OCR）：截屏完成即可弹出截图所含图片..._xm转m4a

Qt 代码规范(叶海)_csdn叶海-程序员宅基地

文章浏览阅读1k次。代码规范文件夹及文件名空间命名类函数变量花括号枚举信号/槽文件夹及文件名//使用首字母大写驼峰命名MainWindow3dparty //(第三方文件夹名称)除外MainWindow.cppmain.cpp //除外空间命名#define RO_NETWORK_BEGIN namespace RO_NAMESPACE { namespace RO_NETWORK_NAMESPACE {#define RO_NETWORK_END }}类//使用首字母大写驼峰命名与文件名一致cl_csdn叶海

swift--UIStackView的实用技巧_swift stackview-程序员宅基地

文章浏览阅读1.4k次。基础这部分参考：原文地址open var axis: NSLayoutConstraint.Axis // 子控件布局方向(水平或者垂直),也就是下面说的轴方向,/**case fill 沿轴方向填充视图.会按照优先级压缩或者拉伸子视图case fillEqually 沿轴方向使子视图等宽或者等高case fillProportionally 沿轴方向按照`in..._swift stackview

软件测试在国内的现状与趋势_测试的全国形式-程序员宅基地

文章浏览阅读7k次。软件测试在国内的现状与趋势前导语1：先了解一下什么是软件测试，及其重要性软件测试是保证软件质量、提高软件可靠性的重要途径，软件测试的质量与测试人员的技能、经验以及对被测软件的理解密切相关。前导语2：再了解一下国外的软件测试的现状与发展。国际上，软件测试（软件质量控制）是一件非常重要的工程工作，测试也作为一个非常独立的职业。在IBM、_测试的全国形式

随便推点

Java-接口和多态_error: constructor pingpangplayer in class pingpan-程序员宅基地

文章浏览阅读149次。接口接口Interface，接口和类的关系是实现，implementsInterface 接口名{}package com.it01;/* * java用于处理继承的单一局限性---接口Interface，接口和类的关系是实现，implements * * 创建接口的格式 * Interface 接口名{ * } */public class Inte..._error: constructor pingpangplayer in class pingpangplayer cannot be applied

Kotlin-简约之美-进阶篇（二）：when的使用详解_kotlin duplicate label in when-程序员宅基地

文章浏览阅读1.4k次。提到 when，大家都会联想到 Java 中的 switch，然而在 kotlin 中，when 显然比 Java 中的 switch 要强大得多。首先，我们先来看看 when 的特点：它可以作为表达式使用使用更加安全强大灵活的分支结构可以不带参数接下来，我来带大家逐步领略这些特点。以下面这段 Java 功能代码为例：switch(animal) { case EAGLE:..._kotlin duplicate label in when

NVIDIA vGPU vApps/vWS/vCS适配GPU版本介绍-程序员宅基地

文章浏览阅读2.9k次。NVIDIA vGPU 12.0版本-vGPU版本名称变化 -注: 2021年1月生效最新名称 NVIDIA Virtual PC (vPC)-曾用名称 NVIDIA GRID Virtual PC (GRID vPC) 最新名称 NVIDIA Virtual Applications (vApps)-曾用名称 NVIDIA GRID Virtual Applications (GRID vApps) 最新名称 NVIDIA RTX Virtual Workstation (vWS)-曾用名...

ssh树苺派问题：-bash: warning: setlocale: LC_ALL: cannot change locale (zh_CN)-程序员宅基地

文章浏览阅读1.2w次，点赞2次，收藏5次。1 问题描述MAC、Ubuntu16.04通过ssh方式连接树苺派4B时，均出现如下问题提示，并且在编辑时出现乱码。-bash: warning: setlocale: LC_ALL: cannot change locale (zh_CN)其中，树苺派locale如下locale: Cannot set LC_CTYPE to default locale: No such file ..._bash: warning: setlocale: lc_all: cannot change locale (zh_cn.utf-8)

MybatisPlus基础学习之插入更新数据和主键生成策略_myibatisplus插入时其他字段也插入主键的值-程序员宅基地

文章浏览阅读1k次。3.MybatisPlus插入和更新数据上一篇博客带领大家快速入门体验了一下MybatisPlus，今天带大家学习一下MybatisPlus如何插入和更新数据，以及它自带的主键生成策略的简单使用！如果还没有看过上一篇的MybatisPlus快速入门体验的，我把博客链接贴出来，大家可以学习完后再来阅读本篇博客：https://blog.csdn.net/weixin_45301250/article/details/118833460?spm=1001.2014.3001.55013.1 插入数据测试_myibatisplus插入时其他字段也插入主键的值

Tensorflow学习笔记：用minst数据集训练卷积神经网络并用训练后的模型测试自己的BMP图片_训练出的模型测试随机图片-程序员宅基地

文章浏览阅读1.2w次。（1）mnist_test_conv.py代码如下#! /usr/bin/env python2# -*- coding: utf-8 -*-'''构造一个卷积神经网络来训练mnist：输入层： 784个输入节点两个卷积层（每个都具有一个卷积和Pooling操作）：卷积操作：步长为1，边距为0，filter: 5x5 Pooling(池化): 采用maxpooing, 2x2_训练出的模型测试随机图片