前端瀑布流效果

先看效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body style="background-color: #000;padding: 0; margin: 0;"><canvas id="canvas"></canvas>
</body><script>let cvs = document.querySelector('canvas');let ctx = cvs.getContext('2d');function init() {cvs.width = window.innerWidth * devicePixelRatio;cvs.height = window.innerHeight * devicePixelRatio;console.log(cvs.width);console.log(cvs.height);}init()let fontsize = 20 * devicePixelRatio;ctx.fillStyle="#000"let columCount = Math.floor(cvs.width/fontsize);//获取列let charIndex = new Array(columCount).fill(0);function draw() {ctx.fillStyle='rgba(0,0,0,0.1)'ctx.fillRect(0,0,cvs.width,cvs.height)ctx.fillStyle='#6be445'ctx.textBaseline='top'for (let i = 0; i < columCount; i++) {let x = i *fontsize;let y = charIndex[i] *fontsize;ctx.fillText(getRandomText(),x,y)if(y>cvs.height && Math.random()>0.99){charIndex[i] = 0;}else{charIndex[i]++}}}draw()function getRandomText() {let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';return str[Math.floor(Math.random()*str.length)]}setInterval(draw, 50);</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/122445.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python调用C语言库

1. 在linux下通过gcc生成so库 //请保存为 foo.c #include<stdio.h> #define uint8_t unsigned char #define uint16_t unsigned shorttypedef struct TagMyStruct {char name[10];uint8_t age;int score; } MyStruct,*MyStructPointer;MyStructPointer foo_get_data_…

智慧工厂能源管理系统

随着全球工业4.0浪潮的推进&#xff0c;制造业逐渐向智能化、绿色化方向发展。其中&#xff0c;智慧工厂能源管理系统作为绿色智能制造的重要组成部分&#xff0c;对于提高企业能源利用效率、降低生产成本具有重要意义。本文将从智慧工厂能源管理系统的背景、技术架构、功能及应…

报错:axios发送的所有请求都是404

axios发送的所有请求都是404 一、问题二、分析三、解决一、问题 对后台发送数据请求接口,在 Swagger 上是可以请求到的 但是通过 Ajax 发送请求就会报 404 Swagger 上调用如下 项目接口请求如下

实践和项目:解决实际问题时,选择合适的数据结构和算法

文章目录 选择合适的数据结构数组链表栈队列树图哈希表 选择合适的算法实践和项目 &#x1f389;欢迎来到数据结构学习专栏~实践和项目&#xff1a;解决实际问题时&#xff0c;选择合适的数据结构和算法 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT…

简易版人脸识别qt opencv

1、配置文件.pro #------------------------------------------------- # # Project created by QtCreator 2023-09-05T19:00:36 # #-------------------------------------------------QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT widgetsTARGET 01_face TEMP…

FLUX查询InfluxDB -- InfluxDB笔记三

1. 入门 from(bucket: "example_query") // 没有筛选条件直接查询会报错|> range(start: -1h) // |>是管道符&#xff0c;后跟筛选条件 2. 序列、表和表流 序列是InfluxDB的概念&#xff0c;一个序列是由measurement、标签集、一个字段名称 表流是FLUX为了…

Python Opencv实践 - 轮廓特征(最小外接圆,椭圆拟合)

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/stars.PNG") plt.imshow(img[:,:,::-1])#轮廓检测 img_gray cv.cvtColor(img, cv.COLOR_BGR2GRAY) ret,thresh cv.threshold(img_gray, 127, 255, 0) contou…

纯前端实现 导入 与 导出 Excel

最近经常在做 不规则Excel的导入&#xff0c;或者一些普通Excel的导出&#xff0c;当前以上说的都是纯前端来实现&#xff1b;下面我们来聊聊经常用到的Excel导出与导入的实现方案&#xff0c;本文实现技术栈以 Vue2 JS 为例 导入分类&#xff1a; 调用 API 完全由后端来解析数…

C++(QT)画图行车

通过鼠标在窗口上点击形成多个点的连线&#xff0c;绘制一辆汽车沿着绘制的连线轨迹前进。要求连线点数大于20.可以通过清除按钮清除已经绘制的连线&#xff0c;并可以重新绘制一条轨迹连线。当车辆行驶到轨迹终点时&#xff0c;自动停止。&#xff08;汽车实在可用方块代替&am…

MIT6.S081实验环境搭建

MIT6.S081 lab 环境搭建 本文参考了MIT的官方指南和知乎文章环境搭建 step1 首先需要一个ubuntu20.04的系统&#xff0c;我使用的是vscode的WSL2连接的ubuntu20.04&#xff0c;使用virtual box建一个ubuntu20.04的虚拟机应该也可以。 可以用 lsb_release -a 查看一下自己ub…

NoSQL之Redis配置与优化(一)

关系数据库与非关系型数据库 &#xff1a; ●关系型数据库&#xff1a; 关系型数据库是一个结构化的数据库&#xff0c;创建在关系模型&#xff08;二维表格模型&#xff09;基础上&#xff0c;一般面向于记录。 SQL 语句&#xff08;标准数据查询语言&#xff09;就是一种基于…

网站edge -- 油猴 -> IDM

一、百度网盘限速 未解决 软件&#xff1a;IDM 安装路径&#xff1a; 1.1如果&#xff1a;edge 出问题打不开其他网站&#xff0c; 解决方法&#xff1a; 以管理员的身份&#xff0c;右击载这个软件&#xff0c;就好了 1.2使用这个软件 应该是右击这个软件 以管理员的身…

Redis Redis的数据结构 - 通用命令 - String类型命令 - Hash类型命令

目录 Redis的数据结构&#xff1a; Redis命令&#xff1a; 通用命令&#xff1a;&#xff08;通用指令是部分数据类型的&#xff0c;都可以使用的指令&#xff09; KEYS查询命令&#xff1a; DEL删除命令&#xff1a; EXISTS判断命令&#xff1a; EXPIPE有效期设置命令&…

蓝桥杯打卡Day2

文章目录 糖果分享游戏玛雅人的密码 一、糖果分享游戏IO链接 本题思路:本题是一道模拟题&#xff0c;最终需要每个人得到相同的糖果&#xff0c;那么此时我们开辟一个数组用来保存每个人分一半的结果&#xff0c;然后每个人都需要从左边拿到对方糖果&#xff0c;那么左边就是…

分享一下在微信上有哪些微信活动可以做

微信营销活动是吸引更多用户和提高品牌知名度的有效策略。下面是一些微信营销活动的做法&#xff1a; 抽奖活动&#xff1a;通过设置奖品和参与条件&#xff0c;吸引用户参与抽奖活动。例如&#xff0c;可以设置关注公众号、转发活动页面等条件&#xff0c;吸引更多用户参与抽奖…

Yalmip使用教程(6)-将约束条件写成矩阵形式

博客中所有内容均来源于自己学习过程中积累的经验以及对yalmip官方文档的翻译&#xff1a;https://yalmip.github.io/tutorials/ 这篇博客将详细介绍如何借助yalmip工具箱将约束条件写成矩阵形式。 1.相关函数介绍 1.1 depends和getvariables函数 depends和getvariables函数都…

两个路由器如何连接设置的方法攻略

一、前言 随着智能家居时代来临&#xff0c;家里的网络部署需求开始复杂起来。往往一个路由器已经不能满足需求或者不利于拓展。两个路由器连接最常见的情况是家中已有一个路由器&#xff0c;并且已经通过这个路由器来正常上网。现在是因某些原因想在不改变已经在用的路由器的设…

【huggingface】数据集及模型下载并保存至本地

目录 数据集ChnSentiCorppeoples_daily_ner 模型bert-base-chinesehfl/rbt3t5-baseopus-mt-zh-enChinese_Chat_T5_Base 环境&#xff1a;没有代理&#xff0c;无法访问部分国外网络 数据集 正常情况下通过load_dataset加载数据集&#xff1b;save_to_disk保存至本地&#xff1b…

jupyter notebook 魔术命令介绍和简单使用

在Jupyter notebook中&#xff0c;“魔法命令”是特殊的命令&#xff0c;不是Python语言的一部分&#xff0c;但可以使您的生活更轻松。这些命令前面有%符号。 魔法命令很有用&#xff0c;可以直接嵌入到python代码中&#xff0c;并解决常见问题&#xff0c;例如列出当前目录中…

2020年下半年系统架构设计师上午真题及答案解析

1.按照我国著作权法的权利保护期&#xff0c;&#xff08; &#xff09;受到永久保护。 A.发表权 B.修改权 C.复制权 D.发行权 2.假设某计算机的字长为32位&#xff0c;该计算机文件管理系统磁盘空间管理采用位示图记录磁盘的使用情况&#xff0c;若磁盘的容量为3…