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

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

news 2025/11/22 11:16:53

使用 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 创建一个动态蜈蚣。蜈蚣由多个节段组成&#xff0c;每个节段看起来像一个小圆形&#xff0c;并且每个节段上都附带有“脚”。蜈蚣的头部会在画布上随机移动。 完整代码在底部&#xff01;&…...

编程日记 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. 摘要&#xff08;Abstract&#xff09;2. 引言&#xff08;Introduction&#…...

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

uniapp .gitignore

打开HBuilderX&#xff0c;在项目根目录下新建文件 .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的一个案例。但是存在很多问题&#xff0c;现在我们要做优化&#xff0c;优化的步骤如下&#xff1a; 每个Fruit请求都需…...

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

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

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

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

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

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

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

【更新】LLM Interview

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

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

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

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

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

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

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

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

STUN服务器实现NAT穿透

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

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

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

一、引言 FFmpeg源码在解析完PMT表后&#xff0c;会得到该节目包含的视频和音频信息&#xff0c;从而找到音视频流。TS流的音视频流包含在PES流中。FFmpeg源码通过调用函数指针tss->u.pes_filter.pes_cb指向的回调函数解析PES流的PES packet&#xff1a; /* 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.素分解式(简单版) 任务描述 编写函数&#xff0c;输出一个正整数的素数分解式。主函数的功能为输入若干正整数&#xff08;大于1&#xff09;&#xff0c;输出每一个数的素分解式。素数分解式是指将整数写成若干素数(从小到大)乘积的形式。例如&#xff1a; 202*2*5 362*2*…...

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

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

大学毕业那年&#xff0c;你成了社会底层群众里&#xff0c;受教育程度最高的一批人。 前言 这是我自己学习Python的第四篇博客总结。后期我会继续把Python学习笔记开源至博客上。 上一期笔记有关Python的NumPy数据分析&#xff0c;没看过的同学可以去看看&#xff1a;【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

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

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

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

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

编程日记 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数据库的实现

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

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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/10/27 5:01:21

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/11/16 23:43:05

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/11/16 21:56:35

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/11/16 21:59:44

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/11/16 21:54:27

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/11/17 10:18:26

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/11/21 6:36:46