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

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

智能推荐

P问题、NP问题、NPC问题、NP hard问题-程序员宅基地

文章浏览阅读4.1w次，点赞50次，收藏268次。图论算法摘要1. 图的概念图一个图(graph) G=(V,E)G=(V,E)G=(V,E) 由顶点(vertex)集 VVV 和边(edge)集 EEE 组成。每一条边就是一个点对 (a,b),a,b∈V(a,b),a,b∈V(a,b),a,b∈V。有时候也把边叫做弧(arc)。有向图如果点对(a,b),a,b∈V(a,b),a,b∈V(a,b),a,b∈V是有序的，那么图就是有向的..._npc问题

【UE4 C++】大规模人群绕行避让的最优解DetourCrowdAIController如何开启_detour crowd-程序员宅基地

文章浏览阅读7.6k次，点赞8次，收藏24次。目录问题阐述与解决效果RVO Avoidance与Detour Crowd AI Controller的区别如何使用Detour Crowd AI Controller蓝图C++弃用的写法新版写法（也很简便）问题阐述与解决效果在项目存在大规模寻路人群时，很容易出现两个角色的寻路路径相冲突，就会造成这种互斥现象。使用AI ControllerUE4为此..._detour crowd

《信息系统安全》课后习题答案（陈萍）_信息系统安全第二版课后答案-程序员宅基地

文章浏览阅读1.1w次，点赞22次，收藏146次。《信息系统安全》教材（作者：陈萍，张涛，赵敏）的课后习题答案_信息系统安全第二版课后答案

Ajax跨域问题_ajax请求跨域-程序员宅基地

文章浏览阅读3.2k次，点赞3次，收藏13次。ajax 是不能跨域。那么怎么解决前端发送请求的跨域问题呢。超详细，1、设置响应头、2、通过jsonp 3、通过调用jQuery封装的jsonp 4、httpclient 5、nginx_ajax请求跨域

HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript_响应期末作业-程序员宅基地

文章浏览阅读2.9w次，点赞68次，收藏453次。HTML5+CSS期末大作业：个人网站设计——响应式个人简历介绍网页(5页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水_响应期末作业

python matplotlib显示图片_python 用PIL Matplotlib处理图像的基本操作-程序员宅基地

文章浏览阅读1.4k次。python 用PIL Matplotlib处理图像的基本操作_jupyter 显示matplotlib图片完全