JavaScript+canvas实现粒子动画效果

news2024/12/27 5:21:07

1.HTML部分

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>粒子效果</title>
    <style>
      canvas {
        position: fixed;
        left: 0;
        top: 0;
        background: #222;
      }
    </style>
  </head>

  <body>
    <canvas></canvas>
    <script src="./js/canvas.js"></script>
  </body>
</html>

2.JavaScript部分

const cvs = document.querySelector('canvas');
const ctx = cvs.getContext('2d');
cvs.width = window.innerWidth * window.devicePixelRatio;
cvs.height = window.innerHeight * window.devicePixelRatio;

/**
 * 获取[min, max]范围内的随机整数
 * @param {number} min
 * @param {number} max
 * @return {number}
 */
function getRandom(min, max) {
  return Math.floor(Math.random() * (max + 1 - min) + min);
}

class Point {
  constructor() {
    this.r = 6;
    this.x = getRandom(0, cvs.width - this.r / 2);
    this.y = getRandom(0, cvs.height - this.r / 2);
    this.xSpeed = getRandom(-100, 100);
    this.ySpeed = getRandom(-100, 100); // 每秒钟移动的速度
    // 记录上一次作画的时间 - 知道每一个小段时间的间隔, 计算出移动距离
    this.lastDrawTime = null;
  }
  draw() {
    // 更新坐标
    if (this.lastDrawTime) {
      // 计算新的坐标
      const duration = (Date.now() - this.lastDrawTime) / 1000;
      // 距离
      const xDis = this.xSpeed * duration,
        yDis = this.ySpeed * duration;

      // 计算出新的x和y的坐标
      let x = this.x + xDis,
        y = this.y + yDis;

      // 判断边界
      if (x > cvs.width - this.r / 2) {
        x = cvs.width - this.r / 2;
        this.xSpeed = -this.xSpeed; // 正的变负的 负的变正的
      } else if (x < 0) {
        x = 0;
        this.xSpeed = -this.xSpeed;
      }

      if (y > cvs.height - this.r / 2) {
        y = cvs.height - this.r / 2;
        this.ySpeed = -this.ySpeed; // 正的变负的 负的变正的
      } else if (y < 0) {
        y = 0;
        this.ySpeed = -this.ySpeed;
      }

      this.x = x;
      this.y = y;
    }
    ctx.beginPath();
    // 画一个圆
    ctx.arc(this.x, this.y, 3, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(200, 200, 200, 0.8)';
    ctx.fill();
    this.lastDrawTime = Date.now();
  }
}

class Graph {
  /**
   *
   * @param {number} pointNumber 点的个数
   * @param {number} maxDis 两个点直接的最大距离
   */
  constructor(pointNumber = 100, maxDis = 200) {
    // 生成一系列的点
    this.points = new Array(pointNumber).fill(0).map(() => new Point());
    this.maxDis = maxDis;
  }
  draw() {
    requestAnimationFrame(() => {
      this.draw();
    });
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    for (let i = 0; i < this.points.length; i++) {
      const p1 = this.points[i];
      p1.draw();
      // 跟后面的点相连
      for (let j = i + 1; j < this.points.length; j++) {
        const p2 = this.points[j];
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.closePath();
        // 利用勾股定理计算出两个点之间的距离  **是指数运算符 Math.sqrt()开根号
        const d = Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
        if (d > this.maxDis) {
          continue; // 看下一个点
        }
        ctx.strokeStyle = `rgba(200, 200, 200, ${1 - d / this.maxDis})`;
        ctx.stroke();
      }
      // 两个点它们的距离越远, 颜色就越透明, 越近颜色就越不透明
      // 让点运动起来
    }
  }
}

// 画直线
// ctx.beginPath()
// ctx.moveTo(100, 50)
// ctx.lineTo(200, 100)
// ctx.closePath()
// ctx.strokeStyle = '#fff'
// // 描边
// ctx.stroke()

// ctx.beginPath()
// // 画一个圆
// ctx.arc(100, 50, 6, 0, 2 * Math.PI)
// ctx.fillStyle = '#fff'
// ctx.fill()

// ctx.beginPath()
// // 画一个圆
// ctx.arc(200, 100, 6, 0, 2 * Math.PI)
// ctx.fillStyle = '#fff'
// ctx.fill()

// const p1 = new Point()
// const p2 = new Point()
// p1.draw()
// p2.draw()

const g = new Graph();
g.draw();

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenAI官方吴达恩《ChatGPT Prompt Engineering 提示词工程师》(7)聊天机器人 / ChatBot

聊天机器人 / ChatBot 使用大型语言模型来构建你的自定义聊天机器人 在本视频中&#xff0c;你将学习使用OpenAI ChatCompletions格式的组件构建一个机器人。 环境准备 首先&#xff0c;我们将像往常一样设置OpenAI Python包。 import os import openai from dotenv import…

图像练习-答题卡opencv(02)

原图 结果 代码 // Load source imagecv::Mat src cv::imread("answer_card.jpg", cv::IMREAD_COLOR);if (src.empty()){return;}cv::Mat gray;cv::cvtColor(src, gray, cv::COLOR_BGR2GRAY);cv::Mat binary;double value cv::threshold(gray, binary, 0, 255, …

用PHP实现极验验证功能

极验验证是一种防机器人的验证机制&#xff0c;可以通过图像识别等方式来判断用户是否为真实用户。在实现极验验证功能时&#xff0c;您需要进行以下步骤&#xff1a; 1 注册极验账号&#xff1a; 首先&#xff0c;您需要在极验官网注册账号并创建一个应用&#xff0c;获取相应…

x_ctf_b0verfl0w

x_ctf_b0verfl0w Arch: i386-32-little RELRO: Partial RELRO Stack: No canary found NX: NX disabled PIE: No PIE (0x8048000) RWX: Has RWX segments32位&#xff0c;保护全关&#xff0c;写shellcode int vul() {char s[32]; // [esp18h] [eb…

mac安装 scala 详细教程(包含在 idea 上使用,以及scala插件安装)

目录 一 下载解压 二 配置环境变量 三 测试 scala 四 idea 编写 scala 文件 1. 安装插件 scala 插件 2. 使用 idea 创建 scala 工程 3. 使用idea 创建 maven 工程开发 scala 一 下载解压 去官网选择合适的版本下载 官网地址https://www.scala-lang.org/download/all.…

RocketMQ高性能核心原理与源码架构剖析

文章目录 1、源码环境搭建1.1、主要功能模块1.2、源码启动服务1.2.1、 启动nameServer1.2.2、 启动Broker1.2.3、 发送消息1.2.4、 消费消息 2、源码剖析2.1、NameServer的启动过程2.2、Broker服务启动过程2.3、Netty服务注册框架2.3.1、关注重点2.3.2、源码重点 1、源码环境搭…

进化的京东云DaaS:向大模型要解

通过新的DaaS大模型模式&#xff0c;京东云想要为企业提供的增长路径&#xff0c;恰是从最原始的“要数据”真正进阶到最终的“出效果”&#xff0c;将大模型和京东对增长的理解封装到整个产品矩阵中&#xff0c;帮助企业构建最适合AI时代的增长底盘。 作者|皮爷 出品|产业…

如何保障汽车嵌入式软件的质量与安全?您需要了解ASPICE标准

汽车软件开发流程改进与能力确定&#xff08;Automotive SPICE或ASPICE&#xff09;是一个流程评估模型&#xff0c;它帮助汽车原始设备制造商&#xff08;OEM&#xff09;和供应商评估当前企业软件开发流程的性能和成熟度水平。 遵守这一标准&#xff0c;有助于汽车供应商确保…

Apache Flume

Flume 1.9.0 Developer Guide【Flume 1.9.0开发人员指南】 Introduction【介绍】 摘自&#xff1a;Flume 1.9.0 Developer Guide — Apache Flume Overview【概述】 Apache Flume is a distributed, reliable, and available system for efficiently collecting, aggregati…

迁移 MySQL 数据到 OceanBase 集群

使用 mysqldump 将 mysql的表结构和数据同步到 OceanBase 的MySQL 租户中 Mysql数据库导出 mysqldump -h127.0.0.1 -P3306 -uroot –p --single-transaction --hex-blob --routines --events --triggers --set-gtid-purgedOFF --databases teller >teller.sql mysql> …

sentinel环境搭建以及微服务接入

• sentinel部署 • sentinel-镜像制造 • sentinel-镜像推送 • sentinel-部署配置文件 • 访问控制台 • 外网访问控制台 • 集群内访问 • 配置规则 • 限流效果 • 微服务接入 • pom文件引入依赖 • pod部署文件添加配置 Sentinel 控制台是流量控制、熔断降级规则统一配置…

下载github.com上的依赖资源

下载github.com上的依赖资源&#xff08;需要反复试才能成功&#xff0c;所以单独安装&#xff09; export GIT_TRACE1 export GIT_CURL_VERBOSE1 pip install githttps://github.com/PanQiWei/AutoGPTQ.git -i https://pypi.mirrors.ustc.edu.cn/simple --trusted-hostpypi.mi…

.NET 8 中的 WPF File Dialog 改进

作者&#xff1a;Dipesh Kumar 排版&#xff1a;Alan Wang 我们很高兴宣布从 .NET 8 Preview 7 开始&#xff0c;对 WPF 中的通用文件对话框 API 进行了一系列新的改进。其中包括迄今为止存储库中投票最多的 API 建议 – 允许用户选择文件夹的 OpenFolderDialog 控件 – 以及文…

灾备系统中虚拟机的有代理备份与无代理备份之间的差异

虚拟机的有代理备份是在虚拟机内部安装备份代理程序&#xff0c;然后把虚拟机当作物理机一样来进行备份任务。借助虚拟机系统中内置的程序来进行备份的&#xff0c;就像在正常系统中备份那样&#xff0c;借助备份和还原&#xff08;Windows7&#xff09;功能对系统进行备份。但…

buuctf web [极客大挑战 2019]BabySQL

又是你&#xff0c;还来&#xff1f;好好好 依旧老方法&#xff0c;先试探一手 有错误&#xff1f; 你有一个错误在你的SQL语法;检查与您的MariaDB服务器版本对应的手册&#xff0c;以便在第1行11#和password1 "附近使用正确的语法 看来是or被过滤了&#xff0c;试试双写…

五、核支持向量机算法(NuSVC,Nu-Support Vector Classification)(有监督学习)

和支持向量分类(Nu-Support Vector Classification)&#xff0c;与 SVC 类似&#xff0c;但使用一个参数来控制支持向量的数量&#xff0c;其实现基于libsvm 一、算法思路 本质都是SVM中的一种优化&#xff0c;原理都类似&#xff0c;详细算法思路可以参考博文&#xff1a;三…

Arcgis常用操作技巧

20个Arcgis常用操作技巧 1&#xff09;影像格式的转换 例如把jpg格式转换为tiff格式&#xff0c;可以在arctoolbox中的转换工具-->到光栅-->光栅到其他多种格式&#xff08;conversiontools-->to Raster-->Raster to Other Format multiple&#xff09;。 矢量化…

华为云云耀云服务器L实例评测 | minikube部署和使用

### 1 安装Docker 按照官网[Docker docs](https://docs.docker.com/engine/install/centos/)指引安装&#xff1a; shell yum install -y yum-utils yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo yum install docker-ce docker-…

Apacha Flume

0目录 1.Flume概述 2.Flume安装部署 3.案例1 4.案例2 5.案例3 1.Flume概述 1.1 Flume定义 Flume是Cloudera提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输的系统。Flume基于流式架构&#xff0c;灵活简单。 1.2 Flume基础架构 Flume组…

ubuntu22.04安装opencv4和opencv_contrib

一、下载opencv和opencv_contrib 1、下载opencv Releases - OpenCV选择OpenCV-4.5.0&#xff0c;下载Sources版本&#xff0c;并解压&#xff1b; 2、下载opencv_contrib https://github.com/opencv/opencv_contrib选择右边Release-Tags&#xff0c;选择和opencv一样的版本&…