用HTML5 + JavaScript实现下雪效果
用HTML5 + JavaScript实现下雪效果
下面是用HTML5 + JavaScript实现下雪效果示例，展示了如何使用 HTML5 的 <canvas> 元素以及 JavaScript 来创建下雪效果。效果如下：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Snow Effect</title><style>body {margin: 0;overflow: hidden;background-color: #D3D3D3;}canvas {display: block;}</style>
</head>
<body><canvas id="snow"></canvas></body><script>
document.addEventListener('DOMContentLoaded', function() {var canvas = document.getElementById('snow');var ctx = canvas.getContext('2d');// 设置 canvas 的大小为全屏canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 雪花的数量var numberOfSnowflakes = 100;var snowflakes = [];for (var i = 0; i < numberOfSnowflakes; i++) {snowflakes.push({x: Math.random() * canvas.width,y: Math.random() * canvas.height,radius: Math.random() * 4 + 1,density: Math.random() * numberOfSnowflakes});}// 绘制雪花function drawSnowflakes() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'white';ctx.beginPath();for (var i = 0; i < numberOfSnowflakes; i++) {var snowflake = snowflakes[i];ctx.moveTo(snowflake.x, snowflake.y);ctx.arc(snowflake.x, snowflake.y, snowflake.radius, 0, Math.PI * 2, true);}ctx.fill();moveSnowflakes();}// 移动雪花function moveSnowflakes() {for (var i = 0; i < numberOfSnowflakes; i++) {var snowflake = snowflakes[i];snowflake.y += Math.pow(snowflake.density, 0.5) + 1;snowflake.x += Math.sin(snowflake.y);// 当雪花到达屏幕底部时，重新设置它们的位置if (snowflake.y > canvas.height) {snowflakes[i] = {x: Math.random() * canvas.width,y: 0,radius: snowflake.radius,density: snowflake.density};}}}// 使用 requestAnimationFrame 来持续绘制雪花function animate() {requestAnimationFrame(animate);drawSnowflakes();}animate();
});
</script>
</html>
通过 CSS 控制背景颜色，JavaScript和 <canvas> 负责实现下雪效果。drawSnowflakes 函数负责绘制雪花，而 moveSnowflakes 函数则更新每个雪花的位置，使它们下落。animate 函数使用 requestAnimationFrame 来创建一个循环，不断绘制和更新雪花，从而实现动态的下雪效果。
改进：加入背景图片，并确保图片等比例缩放以适应浏览器窗口的大小。通过 CSS 控制背景颜色或图片，JavaScript 和 <canvas> 负责动态效果，两者相互独立，易于管理和修改。
你可以将背景图片作为 <body> 标签的背景，使用 CSS 来设置并确保其等比例缩放，通过 CSS 的 background 属性来实现：
将
background-color: #D3D3D3;
改为：
background: url(' snow_background.jpg') no-repeat center center fixed;
background-size: cover;
其中，snow_background.jpg，我这里用：
效果如下：
OK！
相关文章：
用HTML5 + JavaScript实现下雪效果
用HTML5 JavaScript实现下雪效果 下面是用HTML5 JavaScript实现下雪效果示例，展示了如何使用 HTML5 的 <canvas> 元素以及 JavaScript 来创建下雪效果。效果如下： 源码如下： <!DOCTYPE html> <html lang"en">…...
PDF操作——批量删除末页
一、说明 由于PDF末页为空白页或者是免责声明需要删除，涉及的文件比较多，因此写了一小段代码进行处理。 二、完整架构流程 这个代码的整体架构流程可以分为以下几个步骤： 导入所需的库：首先，代码导入了PyPDF2和os两…...
Jasperreport 生成 PDF之省纸模式
省纸模式顾名思义就是节省纸张，使用 Jasper 去生成 PDF 的时候如果进行分组打印的时候，一页 A4 纸只会打印一组数据。这种情况下，如果每组数据特别少，只有几行，一页 A4 纸张根本用不了，就会另起一页继续打印…...
IDEA反编译Jar包
反编译步骤 使用IDEA安装decompiler插件 找到decompiler插件文件夹所在位置（IDEA安装路径/plugins/java-decompiler/lib ），将需要反编译的jar包放到decompiler插件文件夹下，并创建一个空的文件夹，用来存放反编译后的…...
MySQL 备份恢复
1.1 MySQL日志管理 在数据库保存数据时，有时候不可避免会出现数据丢失或者被破坏，这样情况下，我们必须保证数据的安全性和完整性，就需要使用日志来查看或者恢复数据了。 数据库中数据丢失或被破坏可能原因： 误删除数…...
UbuntuServer22.04LTS在线安装MySQL8.x
UbuntuServer22.04LTS在线安装MySQL8.x 文章目录 UbuntuServer22.04LTS在线安装MySQL8.x1. 安装1. 官网2. 在线安装3. 修改密码及设置远程登录4. 其他配置参考 2. 启动和停止1. 查看运行状态2. 开机自启3. 查看默认服务器配置命令 3. 登录 1. 安装 1. 官网 官网安装文档&#…...
GmSSL - GmSSL的编译、安装和命令行基本指令
文章目录 Pre下载源代码(zip)编译与安装SM4加密解密SM3摘要SM2签名及验签SM2加密及解密生成SM2根证书rootcakey.pem及CA证书cakey.pem使用CA证书签发签名证书和加密证书将签名证书和ca证书合并为服务端证书certs.pem，并验证查看证书内容： Pre Java - 一…...
面试题：为什么MySQL不建议使用NULL作为列默认值？
文章目录 前言介绍总结 前言 今天来分享一道美团高频面试题，5 分钟搞懂“为什么 MySQL 不建议使用 NULL 作为列默认值？”。 对于这个问题，通常能听到的答案是 使用了 NULL 值的列将会使索引失效,但是如果实际测试过一下,你就知道IS NULL会使…...
ClickHouse基于数据分析常用函数
文章标题 一、WITH语法-定义变量1.1 定义变量1.2 调用函数1.3 子查询 二、GROUP BY子句（结合WITH ROLLUP、CUBE、TOTALS）三、FORM语法3.1表函数3.1.1 file3.1.2 numbers3.1.3 mysql3.1.4 hdfs 四、ARRAY JOIN语法（区别于arrayJoin(arr)函数&a…...
c语言编译和链接
文章目录 翻译环境和运⾏环境编译预处理编译词法分析语法分析语义分析 汇编 链接地址和空间分配符号决议重定位 翻译环境和运⾏环境 在c语言标准（ANSI C）中的任何⼀种实现中，存在两个不同的环境。 翻译环境：在这个环境中将人写的…...
C++ printf解释
在C中，printf 是一个用于格式化输出的函数。它是C语言中标准库函数的一部分，被继承到了C中。 printf函数的基本语法如下： int printf(const char* format, ...); 其中，format 参数是一个格式化字符串，用于指定输出的…...
paddle环境安装
一、paddle环境安装 如pytorch环境安装一样，首先在base环境下创建一个新的环境来安装paddlepaddle框架。首先创建一个新的环境名叫paddle。执行如下命令。 conda create -n paddle python3.8创建好了名叫paddle这个环境以后，进入到这个环境中ÿ…...
kingbase配置SSL双向认证
SSL简介： SSL属于传输加密，在服务器端和客户端建立加密通信渠道来保证数据安全，防止数据在网络传输过程中被篡改和拦截。SSL加密可以使用第三方证书机构颁发的数字证书，也可以使用自签名证书。这里我们使用自签名证书。 背景&am…...
Android Studio 使用小记2 Flutter提交SVN时需要忽略哪些文件
今天上午发了一篇使用SVN的小记，在解决问题的过程中，发现不少同学在使用Android Studio进行Flutter应用开发时，对需要忽略哪些文件（不提交到SVN协同）不是很明确，对于这个问题，Flutter官方有明确…...
搜索引擎评价指标及指标间的关系
目录 二分类模型的评价指标准确率(Accuracy,ACC)精确率(Precision,P)——预测为正的样本召回率(Recall,R)——正样本注意事项 P和R的关系——成反比F值F1值F值和F1值的关系 ROC（Receiver Operating Characteristic）——衡量分类器性能的工具AUCÿ…...
armbian修改docker目录到硬盘
玩客云自带内存8G，根目录很快就满了，这里调整docker的目录到硬盘上/sda1。 docker info|grep "Docker Root Dir:" Docker Root Dir:/var/lib/docker 查看docker 默认目录在哪里 Docker 版本 > v17.05.0 docker -v Docker version 25.0.…...
cip、ethernet/ip开源协议栈：开发源代码
EtherNet/IP是一个工业以太网协议，它结合标准协议TCP和UDP，在以太网上基础上的通用工业协议（CIP）。 该协议由ODVA维护。ODVA还管理其他CIP实现，如DeviceNet。 协议栈和源代码下载 www.jngbus.com 在开发Ethernet/Ip…...
网络原理TCP/IP（2）
文章目录 TCP协议确认应答超时重传连接管理断开连接 TCP协议 TCP全称为"传输控制协议(Transmission Control Protocol").⼈如其名,要对数据的传输进⾏⼀个详细 的控制; TCP协议段格式 • 源/目的端口号:表⽰数据是从哪个进程来,到哪个进程去; • 32位序号/32位确认…...
Echars3D 饼图开发
关于vue echart3D 饼图开发 首先要先下载 "echarts-gl", 放在main.js npm install echarts-gl --save <template><div class"cointan"><!-- 3d环形图 --><div class"chart" id"cityGreenLand-charts"><…...
【PaddleSpeech】语音合成-男声
环境安装 系统：Ubuntu > 16.04 源码下载 使用apt安装 build-essential sudo apt install build-essential 克隆 PaddleSpeech 仓库 # github下载 git clone https://github.com/PaddlePaddle/PaddleSpeech.git # 也可以从gitee下载 git clone https://gite…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”
目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...