null - 程序员宅基地

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

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

智能推荐

基于Capon和信号子空间的变形算法实现波束形成附matlab代码-程序员宅基地

文章浏览阅读946次，点赞19次，收藏19次。波束形成是天线阵列信号处理中的一项关键技术，它通过对来自不同方向的信号进行加权求和，来增强特定方向的信号并抑制其他方向的干扰。本文介绍了两种基于 Capon 和信号子空间的变形算法，即最小方差无失真响应 (MVDR) 算法和最小范数算法，用于实现波束形成。这些算法通过优化波束形成权重向量，来最小化波束形成输出的方差或范数，从而提高波束形成性能。引言波束形成在雷达、声纳、通信和医学成像等众多应用中至关重要。它可以增强目标信号，抑制干扰和噪声，提高系统性能。

uni-app 网络请求提示 OPTIONS xxx 403 (Forbidden)_uni-app解决post请求403 forbidden-程序员宅基地

文章浏览阅读1.1w次，点赞4次，收藏3次。使用API ，向我的服务器发送了POST。_uni-app解决post请求403 forbidden

BLE 链路层(LL)的数据结构_ble的channel map中信道信息-程序员宅基地

文章浏览阅读5k次，点赞3次，收藏13次。一链路层的数据结构在链路层上传输的数据格式如下图所示:广播报文和数据报文都包含 Preamble(前导码)， AccessAddress(接入地址)，PDU(数据)，CRC。其中Constant Tone Extension是可选的。前导码接入地址PDUHeaderLengthMIC(可选)CRCConstant Tone Extension(可选)1 前导码报文最开始的8bit是01010101(0x55)或者10101010(0xAA)。这是很简单的交替序列。接收机_ble的channel map中信道信息

HBase数据大批量导入方式总结和对比_hbase 大数据量导入-程序员宅基地

文章浏览阅读3.4k次，点赞4次，收藏19次。HBase数据导入1. 背景在实际生产中，海量数据一般都不是直接存储在HBase中，这时候就需要一个数据导入到HBase的步骤上一篇博客讲述了可以通过java api的方式或者shell 客户端方式导入或者创建数据，但这对于实际生产中海量数据导入来说，速度和效率都太慢了，所以我们需要使用其他方式来解决海量输入导入到HBase的问题利用HBase底层文件是HFile形式存储再HDFS中，所以如果能够直接生成HFile的话，这时候再让HBase从HFile中读取数据，就会快很多。2. 批量数据导入_hbase 大数据量导入

Qt 串口通信之使用16进制发送数据的转换方式_qt串口发送16进制数据-程序员宅基地

文章浏览阅读1.7k次，点赞2次，收藏18次。16进制QString转成16进制QByteArray一概述有时候在做上位机串口通讯时，经常需要将字符串转成16进制的形式作为发送，借此分析记录一下。二需求分析//假设需要转换的字符：如下QString str = "abcdef1234";//需求转换成 0xab,0xcd,0xef,0x12,0x34 由上图分析得出，很明显我们只需要拆分字符串然后再重新合并就ok啦，知道了解决方法，接下来就是上代码。三编写代码方法1：/*******************_qt串口发送16进制数据

multipartfile上传文件大小限制_multipartfile 大小限制-程序员宅基地

文章浏览阅读1.4w次，点赞7次，收藏15次。关于文件上传大小主要看一个错误org.apache.tomcat.util.http.fileupload.impl.SizeLimitExceededException: the request was rejected because its size (59500387) exceeds the configured maximum (10485760) at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.ini_multipartfile 大小限制

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

智能推荐

基于Capon和信号子空间的变形算法实现波束形成附matlab代码-程序员宅基地

uni-app 网络请求提示 OPTIONS xxx 403 (Forbidden)_uni-app解决post请求403 forbidden-程序员宅基地

BLE 链路层(LL)的数据结构_ble的channel map中信道信息-程序员宅基地

HBase数据大批量导入方式总结和对比_hbase 大数据量导入-程序员宅基地

Qt 串口通信之使用16进制发送数据的转换方式_qt串口发送16进制数据-程序员宅基地

multipartfile上传文件大小限制_multipartfile 大小限制-程序员宅基地

随便推点

Win8蓝屏(WHEA_UNCORRECTABLE_ERROR)-程序员宅基地

案例课1——科大讯飞_科大讯飞培训案例-程序员宅基地

perl下载与安装教程【工具使用】-程序员宅基地

安装VS2008 SP1-程序员宅基地

UITextField添加点击高亮状态_uitextfield return高亮状态-程序员宅基地

8421 BCD码加减校正_负数的8421码-程序员宅基地

推荐文章

热门文章

相关标签