使用canvas实现代码雨高级升阶版【附带源码和使用方法】

简介: 使用canvas实现代码雨高级升阶版【附带源码和使用方法】

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端面试

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

基本绿色的


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="index.js"></script>
</body>
</html>


let canvas = document.querySelector("canvas")
let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
let str = "鋜 斗 z s y y d s 加 油 干".split(" ");
let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
const rain = () => {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "#0f0";
    arr.forEach((item, index) => {
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)
        arr[index] = item > canvas.height || item > Math.random() * 10000 ? 0 : item + 10;
    })
}
setInterval(rain, 40)


彩色版本



html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="index.js"></script>
</body>
</html>


js


let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
let str = "鋜 斗 z s y y d s 加 油 干".split(" ");
let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
const colors = ["#0f0", "#f00", "#00f", "#ff0", "#0ff"]; // 添加颜色数组
const rain = () => {
    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    arr.forEach((item, index) => {
        const randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机选取颜色
        ctx.fillStyle = randomColor; // 使用随机颜色
        ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10);
        arr[index] = item > canvas.height || item > Math.random() * 10000 ? 0 : item + 10;
    });
};
setInterval(rain, 40);


飘散雪花状



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="index.js"></script>
</body>
</html>


let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
let str = "鋜 斗 加 油 猛 猛 干 ".split(" ");
let strIndex = 0;
let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
class Drop {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * -canvas.height;
    this.speed = Math.random() * 2 + 2;
    this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
    this.height = Math.random() * 20 + 10;
    this.text = str[strIndex];
    strIndex = (strIndex + 1) % str.length;
  }
  update() {
    this.y += this.speed;
    if (this.y > canvas.height) {
      this.y = Math.random() * -canvas.height;
      this.x = Math.random() * canvas.width;
      this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);
      this.height = Math.random() * 20 + 10;
      this.text = str[strIndex];
      strIndex = (strIndex + 1) % str.length;
    }
  }
  draw() {
    ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "white";
    ctx.font = this.height + "px Arial";
    ctx.fillText(this.text, this.x, this.y + this.height);
  }
}
let drops = [];
for (let i = 0; i < 100; i++) {
  drops.push(new Drop());
}
const animate = () => {
  drops.forEach((drop) => {
    drop.update();
    drop.draw();
  });
  requestAnimationFrame(animate);
};
animate();


后言


创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
9月前
|
Python
python小项目之利用pygame实现代码雨动画效果(附源码 可供学习)
python小项目之利用pygame实现代码雨动画效果(附源码 可供学习)
242 1
《QT从基础到进阶·二十七》进度条QProgressBar
《QT从基础到进阶·二十七》进度条QProgressBar
221 0
|
C++ Python
Python+Qt抽奖点名工具源码窗体程序
Python+Qt抽奖点名工具源码窗体程序
168 0
Python+Qt抽奖点名工具源码窗体程序
|
移动开发 前端开发 JavaScript
【项目笔记】:前端canvas截图功能
canvasAPI、canvas音视频截图功能及注意事项
304 0
|
数据可视化 开发工具 C语言
python超级画板白板程序源码
python超级画板白板程序源码
222 0
|
数据安全/隐私保护 C语言 Python
Python高级进阶教程021期 pyqt5label控件进阶使用,设置兄弟控件,广告植入
Python高级进阶教程021期 pyqt5label控件进阶使用,设置兄弟控件,广告植入
123 0
从零开始手把手教你使用javascript+canvas开发一个塔防游戏04右侧信息展板
从零开始手把手教你使用javascript+canvas开发一个塔防游戏04右侧信息展板
124 0
|
Web App开发 移动开发 前端开发
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
①万字《详解canvas api画图》小白前端入门教程(建议收藏)
|
前端开发 JavaScript 小程序
HaaS UI小程序解决方案进阶教学之二:Canvas显示二维码
二维码(本文主要介绍qrcode)是目前在移动设备上应用特别广泛的一种编码方式,是用某种特定的几何图形按一定规律在平面(二维方向上)分布的、黑白相间的、记录数据符号信息的图形。
504 15
HaaS UI小程序解决方案进阶教学之二:Canvas显示二维码
|
编解码 JavaScript 前端开发
揭秘Vue3官方教材动画制作过程,一文教会大家做代码演示GIF!
VueMastery是Vue官方推荐的视频课程平台。VueMastery的视频课程讲解非常透彻,PPT也是制作精良,恰当的动画能帮我们更快速的理解视频中的知识点。
451 0
揭秘Vue3官方教材动画制作过程,一文教会大家做代码演示GIF!

热门文章

最新文章