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

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

news 2026/2/9 5:24:20

使用 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

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/8 6:37:39

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/8/23 5:46:26

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

跨链模式：多链互操作架构与性能扩展方案

跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层&#xf…...

编程新知 2026/2/5 14:15:13

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

力扣-35.搜索插入位置

题目描述给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights）多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20