当前位置：首页 > news >正文

使用 HTML5 Canvas 实现动态蜈蚣动画

news 文章来源：https://blog.csdn.net/qq_47658204/article/details/144659603 2025/5/10 7:45:19

使用 HTML5 Canvas 实现动态蜈蚣动画

在这里插入图片描述

1. 项目概述

我们将通过 HTML 和 JavaScript 创建一个动态蜈蚣。蜈蚣由多个节段组成，每个节段看起来像一个小圆形，并且每个节段上都附带有“脚”。蜈蚣的头部会在画布上随机移动。
完整代码在底部！！！！！！！！！！！！

2. 项目实现步骤

2.1 设置 HTML 和 Canvas

首先，我们需要设置一个基本的 HTML 页面，并在页面中插入一个 <canvas> 元素。这是我们绘制动画的区域。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态蜈蚣动画</title><style>body { margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }canvas { border: 1px solid #000; }</style>
</head>
<body><canvas id="myCanvas" width="800" height="400"></canvas><script src="script.js"></script>
</body>
</html>

在上面的代码中，我们定义了一个宽度为 800px，高度为 400px 的 canvas，并通过 script.js 文件来处理动画逻辑。

2.2 初始化蜈蚣的结构

蜈蚣的构成非常简单：它由多个节段组成，每个节段是一个小圆形。每个节段都有一个位置和角度，我们通过数组来保存每个节段的信息。在初始化时，蜈蚣的头部位于画布的中间，并且节段按顺序排列。

let segments = [];  // 存储每个节段的位置
const bodySegments = 20;    // 蜈蚣的节数
const segmentRadius = 10;   // 每个节段的半径
const segmentSpacing = 25;  // 节段之间的间距// 初始化蜈蚣位置
function initMillipede() {for (let i = 0; i < bodySegments; i++) {segments.push({x: 100 + i * (segmentRadius * 2 + segmentSpacing), // 确保每个节段有间距y: canvas.height / 2,  // 初始化位置在画布中间angle: 0,  // 每个节段的初始角度});}
}

3. 绘制蜈蚣

蜈蚣的绘制分为多个部分：每个节段、头部、脚和尾巴。我们使用 canvas 的绘图 API 来绘制每个节段。每个节段是一个圆形，头部稍大，脚则是由短线条组成的。

function drawMillipede() {ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除画布内容// 绘制蜈蚣的每一节for (let i = 0; i < segments.length; i++) {const segment = segments[i];ctx.save();ctx.translate(segment.x, segment.y);ctx.rotate(segment.angle);ctx.beginPath();ctx.arc(0, 0, segmentRadius, 0, Math.PI * 2);ctx.fillStyle = i % 2 === 0 ? "green" : "darkgreen"; // 交替颜色ctx.fill();ctx.restore();}// 绘制蜈蚣的头部（红色）ctx.save();ctx.translate(segments[0].x, segments[0].y);ctx.rotate(segments[0].angle);ctx.beginPath();ctx.arc(0, 0, segmentRadius * 1.5, 0, Math.PI * 2);ctx.fillStyle = "red"; // 蜈蚣头部的颜色ctx.fill();ctx.restore();
}

4. 蜈蚣的随机运动

蜈蚣的运动采用了随机的速度和方向。我们通过调整蜈蚣头部的速度（speedX 和 speedY）来实现蜈蚣在画布上随机移动。同时，我们对速度的变化进行了限制，以防蜈蚣的移动过快。

let speedX = 2;  // 蜈蚣头部水平方向的速度
let speedY = 2;  // 蜈蚣头部垂直方向的速度
let maxSpeed = 4; // 最大速度function updateMillipede() {segments[0].x += speedX;segments[0].y += speedY;// 更新节段的位置和角度，逐步跟随前一个节段for (let i = segments.length - 1; i > 0; i--) {segments[i].x = segments[i - 1].x;segments[i].y = segments[i - 1].y;segments[i].angle = segments[i - 1].angle;}// 随机改变蜈蚣的运动速度，产生不规则的运动speedX += (Math.random() - 0.5) * 0.5;speedY += (Math.random() - 0.5) * 0.5;// 限制速度的范围speedX = Math.max(-maxSpeed, Math.min(maxSpeed, speedX));speedY = Math.max(-maxSpeed, Math.min(maxSpeed, speedY));// 如果蜈蚣头部超出画布的边界，则反弹if (segments[0].x > canvas.width || segments[0].x < 0) {speedX = -speedX;  // 反转水平方向的速度}if (segments[0].y > canvas.height || segments[0].y < 0) {speedY = -speedY;  // 反转垂直方向的速度}
}

5. 动画循环

为了实现持续的动画，我们使用 requestAnimationFrame 来创建一个动画循环。每一帧，我们更新蜈蚣的位置并重新绘制它。

function animate() {updateMillipede();  // 更新蜈蚣的位置和角度drawMillipede();    // 绘制蜈蚣requestAnimationFrame(animate);  // 请求下一帧
}initMillipede();  // 初始化蜈蚣
animate();        // 启动动画循环

6. 完整代码

将上述代码整合，完整的实现如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>生动的蜈蚣动画</title><style>body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: black;}canvas {border: 1px solid white;}</style></head><body><canvas id="myCanvas" width="800" height="400"></canvas><script>// 获取 canvas 元素和上下文const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 蜈蚣的参数const segmentRadius = 10; // 每个节段的半径const segmentSpacing = 1; // 节段之间的间距const bodySegments = 80; // 蜈蚣的节数const footLength = 15; // 脚的长度const footSpacing = 5; // 脚的间距let segments = []; // 存储每个节段的位置let angle = 0; // 角度，用于让蜈蚣做弯曲运动let speed = 5; // 蜈蚣移动的速度// 初始化蜈蚣位置function initMillipede() {for (let i = 0; i < bodySegments; i++) {segments.push({x: 100 + i * (segmentRadius + segmentSpacing),y: canvas.height / 2,angle: 0 // 每个节段的初始角度});}}// 绘制蜈蚣function drawMillipede() {// 清除之前的画布内容ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制蜈蚣的每一节for (let i = 1; i < segments.length; i++) {const segment = segments[i];ctx.save();ctx.translate(segment.x, segment.y);ctx.rotate(segment.angle);ctx.beginPath();ctx.arc(0, 0, segmentRadius, 0, Math.PI * 2);ctx.fillStyle = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`; // 交替颜色ctx.fill();// 绘制脚drawFeet(segment, i);ctx.restore();}// 绘制蜈蚣的头部（红色）ctx.save();ctx.translate(segments[0].x, segments[0].y);ctx.rotate(segments[0].angle);ctx.beginPath();ctx.arc(0, 0, segmentRadius * 1.5, 0, Math.PI * 2);ctx.fillStyle = 'yellow'; // 蜈蚣头部的颜色ctx.fill();// 绘制头部触须drawAntennae(segments[0]);ctx.restore();// 绘制蜈蚣的尾巴drawTail(segments[segments.length - 1]);}// 绘制蜈蚣的脚function drawFeet(segment, index) {const footOffset = index % 2 === 0 ? -footSpacing : footSpacing;for (let i = 0; i < 2; i++) {// 每节有两只脚const angleOffset = i === 0 ? -Math.PI / 4 : Math.PI / 4; // 左右两只脚ctx.save();ctx.translate(0, 0);ctx.rotate(segment.angle + angleOffset);// 绘制脚ctx.beginPath();ctx.moveTo(0, segmentRadius);ctx.lineTo(footLength, segmentRadius + footOffset);ctx.lineWidth = 2;ctx.strokeStyle = 'white';ctx.stroke();ctx.restore();}}// 绘制头部的触须function drawAntennae(segment) {const antennaLength = 20;ctx.save();ctx.translate(0, 0);ctx.rotate(segment.angle);ctx.beginPath();ctx.moveTo(0, -segmentRadius * 1.5);ctx.lineTo(antennaLength, -segmentRadius * 1.5 - 10);ctx.moveTo(0, -segmentRadius * 1.5);ctx.lineTo(antennaLength, -segmentRadius * 1.5 + 10);ctx.lineWidth = 2;ctx.strokeStyle = 'white';ctx.stroke();ctx.restore();}// 绘制蜈蚣的尾巴function drawTail(segment) {const tailLength = 20;const tailAngle = Math.PI / 4; // 向下的角度ctx.save();ctx.translate(segment.x, segment.y);ctx.rotate(segment.angle + Math.PI);ctx.beginPath();ctx.moveTo(0, segmentRadius);ctx.lineTo(tailLength, segmentRadius + tailLength);ctx.lineWidth = 2;ctx.strokeStyle = 'green';ctx.stroke();ctx.restore();}// 更新蜈蚣的位置和角度function updateMillipede() {// 头部的运动轨迹：向右偏移segments[0].x += speed;segments[0].y += Math.sin(angle) * 3; // 头部上下波动// 更新节段的位置和角度，逐步跟随前一个节段for (let i = segments.length - 1; i > 0; i--) {segments[i].x = segments[i - 1].x;segments[i].y = segments[i - 1].y;segments[i].angle = segments[i - 1].angle;}// 更新头部的角度，给蜈蚣的运动加入弯曲感segments[0].angle += Math.sin(angle) * 0.1; // 使蜈蚣头部产生摇摆的效果// 改变角度来产生蜈蚣的弯曲运动angle += 0.1;// 如果蜈蚣头部超出画布的右边界，则回到左边if (segments[0].x > canvas.width) {segments[0].x = -segmentRadius * 2;}}// 动画循环function animate() {updateMillipede(); // 更新蜈蚣的位置和角度drawMillipede(); // 绘制蜈蚣requestAnimationFrame(animate); // 请求下一帧}// 初始化并开始动画initMillipede();animate();</script></body>
</html>

7. 结尾

拜拜，彦祖，亦菲们

使用 HTML5 Canvas 实现动态蜈蚣动画

使用 HTML5 Canvas 实现动态蜈蚣动画 1. 项目概述我们将通过 HTML 和 JavaScript 创建一个动态蜈蚣。蜈蚣由多个节段组成，每个节段看起来像一个小圆形，并且每个节段上都附带有“脚”。蜈蚣的头部会在画布上随机移动。完整代码在底部！&…...

编程日记 2024/12/24 6:07:34

计算机视觉目标检测——DETR(End-to-End Object Detection with Transformers)

计算机视觉目标检测——DETR(End-to-End Object Detection with Transformers) 文章目录计算机视觉目标检测——DETR(End-to-End Object Detection with Transformers)摘要Abstract一、DETR算法1. 摘要（Abstract）2. 引言（Introduction&#…...

编程日记 2024/12/24 6:06:32

uniapp .gitignore

打开HBuilderX，在项目根目录下新建文件 .gitignore复制下面内容 #忽略unpackge目录下除了res目录的所有目录 unpackage/* !unpackage/res/#忽略.hbuilderx目录 .hbuilderx# 忽略node_modules目录下的所有文件 node_modules/# 忽略锁文件 package-lock.json yarn.l…...

编程日记 2024/12/24 6:04:30

JavaWeb Servlet的反射优化、Dispatcher优化、视图(重定向)优化、方法参数值获取优化

目录 1. 背景2. 实现2.1 pom.xml2.2 FruitController.java2.3 DispatcherServlet.java2.4 applicationContext.xml 3. 测试 1. 背景前面我们做了Servlet的一个案例。但是存在很多问题，现在我们要做优化，优化的步骤如下： 每个Fruit请求都需…...

编程日记 2024/12/24 6:03:27

备忘一个FDBatchMove数据转存的问题

使用FDBatchMove的SQL导入excel表到sql表，设置条件时一头雾水，函数不遵守sql的规则。比如替换字段的TAB键值为空，replace(字段名,char(9),)竟然提示错误，百思不得其解。试遍了几乎所有的函数，竟然是chr(9)。这个…...

编程日记 2024/12/24 6:02:24

CEF127 编译指南 MacOS 篇 - 编译 CEF(六)

1. 引言经过前面的准备工作，我们已经完成了所有必要的环境配置。本文将详细介绍如何在 macOS 系统上编译 CEF127。通过正确的编译命令和参数配置，我们将完成 CEF 的构建工作，最终生成可用的二进制文件。 2. 编译前准备 2.1 确认环境变量 …...

编程日记 2024/12/24 6:01:23

【更新】LLM Interview

课程链接：BV1o217YeELo 文章目录 LLM基础相关1. LLMs概述2. 大语言模型尺寸3. LLMs的优势与劣势4. 常见的大模型分类5. 目前主流的LLMs开源模型体系有哪些（Prefix Decoder，Causal Decoder，Encoder-Decoder的区别是什么&#xff09…...

编程日记 2024/12/24 6:00:22

Django 视图中使用 Redis 缓存优化查询性能

在 Web 应用程序开发中,查询数据库是一个常见的操作,但如果查询过于频繁或耗时,就会影响应用程序的性能。为了解决这个问题,我们可以使用缓存技术,将查询结果暂时存储在内存中,从而减少对数据库的访问。本文将介绍如何在 Django 视图中使用 Redis 缓存来优化查询性能。 © …...

编程日记 2024/12/24 5:59:20

正则表达式解析与功能说明

正则表达式解析与功能说明表达式说明 String regex "\\#\\{TOASRTRINNG\\((.*?)((.*?))\\)(\\})";该正则表达式的作用是匹配形如 #{TOASRTRINNG(...)} 的字符串格式。以下是正则表达式的详细解析： 拆解与解析 1. \\# 匹配：# 字符。说明…...

编程日记 2024/12/24 5:58:16

STUN服务器实现NAT穿透

NAT穿透的问题在现代网络环境中，大多数设备都位于NAT(网络地址转换)设备后面。这给点对点(P2P)通信带来了挑战，因为NAT会阻止外部网络直接访问内部设备。STUN(Session Traversal Utilities for NAT)服务器就是为了解决这个问题而设计的。 STUN是什么?…...

编程日记 2024/12/24 5:55:13

音视频入门基础：MPEG2-TS专题（19）——FFmpeg源码中，解析TS流中的PES流的实现

一、引言 FFmpeg源码在解析完PMT表后，会得到该节目包含的视频和音频信息，从而找到音视频流。TS流的音视频流包含在PES流中。FFmpeg源码通过调用函数指针tss->u.pes_filter.pes_cb指向的回调函数解析PES流的PES packet： /* handle one TS…...

编程日记 2024/12/24 5:54:12

tomcat的安装以及配置（基于linuxOS）

目录安装jdk环境 yum安装验证JDK环境安装tomcat应用 yum安装编辑使用yum工具进行安装配置tomcat应用关闭防火墙和selinux 查看端口开启情况编辑访问tomcat服务安装扩展包重启服务查看服务源码安装进入tomcat官网进行下载查找自己要用的to…...

编程日记 2024/12/24 5:51:08

因子分解(递归)

1.素分解式(简单版) 任务描述编写函数，输出一个正整数的素数分解式。主函数的功能为输入若干正整数（大于1），输出每一个数的素分解式。素数分解式是指将整数写成若干素数(从小到大)乘积的形式。例如： 202*2*5 362*2*…...

编程日记 2024/12/24 5:49:07

【Python】pandas库---数据分析

大学毕业那年，你成了社会底层群众里，受教育程度最高的一批人。前言这是我自己学习Python的第四篇博客总结。后期我会继续把Python学习笔记开源至博客上。上一期笔记有关Python的NumPy数据分析，没看过的同学可以去看看：【Pyt…...

编程日记 2024/12/24 5:48:06

RabbitMQ 的7种工作模式

RabbitMQ 共提供了7种⼯作模式,进⾏消息传递,. 官⽅⽂档:RabbitMQ Tutorials | RabbitMQ 1.Simple(简单模式) P:⽣产者,也就是要发送消息的程序 C:消费者,消息的接收者 Queue:消息队列,图中⻩⾊背景部分.类似⼀个邮箱,可以缓存消息;⽣产者向其中投递消息,消费者从其中取出消息…...

编程日记 2024/12/24 5:42:00

负载均衡式在线OJ

文章目录项目介绍所用技术与开发环境所用技术开发环境项目框架compiler_server模块compiler编译功能comm/util.hpp 编译时的临时文件comm/log.hpp 日志comm/util.hpp 时间戳comm/util.hpp 检查文件是否存在compile_server/compiler.hpp 编译功能总体编写 runner运行功能资源设…...

编程日记 2024/12/24 5:39:59

【3D打印机】启庞KP3S热床加热失败报错err6

最近天冷，打印机预热突然失败，热床无法加热，过了一段时间报错err6，查看另一篇资料说是天气冷原因，导致代码的PID控温部分达不到预期加热效果，从而自检报错，然后资料通过修改3D打印机代码的方式进…...

编程日记 2024/12/24 5:38:54

基于 MATLAB 的图像增强技术分享

一、引言图像增强是数字图像处理中的重要环节，其目的在于改善图像的视觉效果，使图像更清晰、细节更丰富、对比度更高，以便于后续的分析、识别与理解等任务。MATLAB 作为一款功能强大的科学计算软件，提供了丰富的图像处理工具和函…...

编程日记 2024/12/24 5:37:48

前端知识补充—HTML

1. HTML 1.1 什么是HTML HTML(Hyper Text Markup Language), 超⽂本标记语⾔超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等标记语⾔: 由标签构成的语⾔…...

编程日记 2024/12/24 5:35:46

安卓从Excel文件导入数据到SQLite数据库的实现

在现代的移动应用开发中，数据的处理和管理是至关重要的一环。有时候，我们需要从外部文件（如Excel文件）中导入数据，以便在应用程序中使用。本文将介绍如何在Android应用中使用Java代码从一个Excel文件中导入数据到SQLit…...

编程日记 2024/12/24 5:32:43

C/C++基础知识复习（44）

1) C 中多态性在实际项目中的应用场景多态性是面向对象编程（OOP）中的一个重要特性，指的是不同的对象可以通过相同的接口来表现不同的行为。在 C 中，多态通常通过虚函数（virtual）和继承机制来实现。实际项…...

编程日记 2024/12/24 5:31:42

【day13】深入面向对象编程

【day12】回顾在正文开始之前，先让我们回顾一下【day12】中的关键内容： 接口（Interface）： interface关键字用于定义接口。implements关键字用于实现接口。接口成员： 抽象方法：需要在实现类中…...

编程日记 2024/12/24 5:30:40

《火星人》

题目描述人类终于登上了火星的土地并且见到了神秘的火星人。人类和火星人都无法理解对方的语言，但是我们的科学家发明了一种用数字交流的方法。这种交流方法是这样的，首先，火星人把一个非常大的数字告诉人类科学家，科学家破解这…...

编程日记 2024/12/24 5:29:39

盒子模型（内边距的设置）

所有元素都可以设置内边距属性和外边距属性大体相同，可参考上一篇，但有区别内边距不能设置为负值padding-方向：尺寸注意：使用内边距padding之后元素整体会变大，因为他是直接加上了内边距的大小，不改变元素…...

编程日记 2024/12/24 5:28:37

CentOS7网络配置，解决不能联网、ping不通外网、主机的问题

1. 重置关闭Centos系统编辑->虚拟网络编辑器还原默认设置 2. 记录基本信息查看网关地址,并记录在小本本上查看网段,记录下 3. 修改网卡配置启动Centos系统非root用户,切换root su root查看Mac地址 ifconfig 或 ip addr记录下来修改配置文件 vim /et…...

编程日记 2024/12/24 5:26:34

如何测继电器是否正常

继电器是一种电控制器件，广泛应用于自动控制、电力保护等领域。为了确保继电器的正常工作，定期检测其状态是非常必要的。以下是一些常用的方法来测试继电器是否正常工作： 1. 视觉检查： - 观察继电器的外观是否有损坏、变形或烧焦…...

编程日记 2024/12/24 5:25:31

最优二叉搜索树【东北大学oj数据结构10-4】C++

题面最优二叉搜索树是由 n 个键和 n1 个虚拟键构造的二叉搜索树，以最小化搜索操作的成本期望值。给定一个序列 Kk1,k2,...,kn，其中 n 个不同的键按排序顺序 ，我们希望构造一个二叉搜索树。对于每个关键 ki，我们有一个…...

编程日记 2024/12/24 5:24:27

ESP32应用开发-Webserver

文章目录库调用实例实现思路技术要点 1. 前端涉及的文件需要包装再发送2. http-GET路由3. http-POST路由开发环境：Arduino 库调用 #include <WebServer.h> #include <ArduinoJson.h> //IDE没有自带，需自行安装实例 WebServer server…...

编程日记 2024/12/24 5:23:26