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

一个小的画布Canvas页面，记录点的轨迹

news 2025/8/26 16:36:18

Hello大家好，好久没有更新了，最近在忙一些其他的事，今天说一下画布canvas，下面是我的代码，实现了一个点从画布的（0,0）到（canvas.width，canvas.height）的一个实现其中我在canvas里面加了一个背景，你们只需要把你们的图片放在上面即可实现一小段代码的运行，好久没有说知识点了！！慢慢会来的。打算更一些计网和数据库，暑假说吧！我是：

爱吃鸡爪zi！

话不多说，代码如下：建议从draw函数看起走

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.container {text-align: center;font-family: Arial, sans-serif;border: 2px solid #000;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);height: 80vh;display: flex;flex-direction: column;justify-content: center;align-items: center;}canvas {border: 1px solid #000;width: 80%;height: 50%;}.buttons {margin-top: 20px;}button {margin: 0 10px;padding: 10px 20px;font-size: 16px;cursor: pointer;}</style>
</head>
<body><div class="container"><h1>路径安全活动展示</h1><canvas id="myCanvas"></canvas><div class="buttons"><button id="backButton">返回上一级</button><button id="refreshButton">刷新</button><button id="stopButton">停止动画</button></div></div><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');// 设置画布的宽度和高度canvas.width = 400;canvas.height = 400;// 创建一个新的Image对象var backgroundImage = new Image();// 设置Image对象的src属性为你的图片URLbackgroundImage.src = '../img/bg1.png';// 在图片加载完成后，绘制图片到画布上backgroundImage.onload = function() {ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);};// 在图片加载完成后，绘制图片到画布上backgroundImage.onload = function() {ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);};var obstacles = [{x:100 ,y:0 , size:15},{ x: 50, y: 50, size: 10 },{ x: 100, y: 100, size: 10 },{x:180 ,y:100 , size:15},{ x: 150, y: 150, size: 10 },{x:170 ,y:210 , size:15},{x:250 ,y:210 , size:15},{x:250 ,y:260 , size:15},{x:380 ,y:260 , size:15}];var redCircle = {x: 10,y: 10,speed: 0.6,direction: 'right'};var animationRunning = true;var redCircleVisible = true;function drawObstacles() {for (var i = 0; i < obstacles.length; i++) {var obstacle = obstacles[i];ctx.fillStyle = 'black';ctx.fillRect(obstacle.x, obstacle.y, obstacle.size, obstacle.size);}}function drawRedCircle() {if (redCircleVisible) {ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(redCircle.x, redCircle.y, 10, 0, Math.PI * 2);ctx.fill();}}function updateRedCirclePosition() {if (redCircle.direction === 'right') {redCircle.x += redCircle.speed;if (redCircle.x >= canvas.width - 10) {redCircle.x = canvas.width - 10;redCircle.direction = 'down';}} else if (redCircle.direction === 'down') {redCircle.y += redCircle.speed;if (redCircle.y >= canvas.height - 10) {redCircle.y = canvas.height - 10;redCircleVisible = false;animationRunning = false;alert("红色点已到达右下角！");}}for (var i = 0; i < obstacles.length; i++) {var obstacle = obstacles[i];if (redCircle.x < obstacle.x + obstacle.size &&redCircle.x + 10 > obstacle.x &&redCircle.y < obstacle.y + obstacle.size &&redCircle.y + 10 > obstacle.y) {if (redCircle.direction === 'right') {redCircle.direction = 'down';} else if (redCircle.direction === 'down') {redCircle.direction = 'right';}}}}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);drawObstacles();drawRedCircle();updateRedCirclePosition();}function animate() {if (animationRunning) {draw();requestAnimationFrame(animate);}}animate();// 按钮事件处理函数document.getElementById('backButton').addEventListener('click', function() {window.history.back();});document.getElementById('refreshButton').addEventListener('click', function() {window.location.reload();});document.getElementById('stopButton').addEventListener('click', function() {animationRunning = false;alert("动画已停止");});</script>
</body>
</html>

其中，没有使用什么算法，// 设置Image对象的src属性为你的图片URL
    backgroundImage.src = '../img/bg1.png';把这个的src换为自己的即可。下面是我的运行截图：

相关文章：

一个小的画布Canvas页面，记录点的轨迹

Hello大家好&#xff0c;好久没有更新了&#xff0c;最近在忙一些其他的事&#xff0c;今天说一下画布canvas&#xff0c;下面是我的代码&#xff0c;实现了一个点从画布的&#xff08;0,0&#xff09;到&#xff08;canvas.width&#xff0c;canvas.height&#xff09;的一个实…...

编程日记 2024/6/13 3:50:15

docker-compose教程

1. docker-compose是什么&#xff1f; 1. 1 简介 compose、machine 和 swarm 是docker 原生提供的三大编排工具。 简称docker三剑客。Compose 项目是 Docker 官方的开源项目&#xff0c;定义和运行多个 Docker 容器的应用&#xff08;Defining and running multi-container Do…...

编程日记 2024/6/13 3:47:10

结果出乎意料！MySQL和MariaDB谁快？MySQL 8.0比MySQL 5.6快吗？

MySQL和MariaDB哪个更快&#xff1f;MySQL 8.0的版本和早期MySQL 5.6的版本哪个更快&#xff1f;这儿有个第三方的测试报告回答了这两个大家关心的问题&#xff0c;姚远来和大家一起解读一下。https://smalldatum.blogspot.com/2024/04/sysbench-on-small-server-mariadb-and.h…...

编程日记 2024/6/13 3:46:09

Alienware外星人X17R2 原装Win11系统镜像下载 带SupportAssist OS Recovery一键恢复

装后恢复到您开箱的体验界面&#xff0c;包括所有原机所有驱动AWCC、Mydell、office、mcafee等所有预装软件。 最适合您电脑的系统&#xff0c;经厂家手调试最佳状态&#xff0c;性能与功耗直接拉满&#xff0c;体验最原汁原味的系统。 原厂系统下载网址&#xff1a;http://w…...

编程日记 2024/6/13 3:45:08

【NI国产替代】高速数据采集模块，最大采样率为 125 Msps，支持 FPGA 定制化

• 双通道高精度数据采集 • 支持 FPGA 定制化 • 双通道高精度采样率 最大采样率为 125 Msps12 位 ADC 分辨率 最大输入电压为 0.9 V -3 dB 带宽为 30 MHz 支持 FPGA 定制化 根据需求编程实现特定功能和性能通过定制 FPGA 实现硬件加速&#xff0c;提高系统的运算速度FPGA…...

编程日记 2024/6/13 3:44:07

【网络安全的神秘世界】2024.6.6 Docker镜像停服？解决最近Docker镜像无法拉取问题

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 解决Docker镜像无法拉取问题 &#x1f64b;‍♂️问题描述 常用镜像站&#xff1a;阿里云、科大、南大、上交等&#xff0c;全部挂掉 执行docker pull命…...

编程日记 2024/6/13 3:43:06

【Python入门与进阶】1基本输入和输出

基本输入输出 1.等号赋值 1.1 基本赋值 number_110number_1 1.2 多个赋值 number_2number_3number_420 number_2 number_3 number_4 1.3 多重赋值 number_5,number_6,number_730,35,40 number_5 number_6 number_7 1.4 下划线赋值 _50 _ 2.命名规则 注意&#xff1a…...

编程日记 2024/6/13 3:42:05

CTF Show MISC做题笔记

MISCX 30 题目压缩包为misc2.rar,其中包含三个文件:misc1.zip, flag.txt, hint.txt。其中后两个文件是加密的。 先解压出misc1.zip, 发现其中包含两个文件&#xff1a;misc.png和music.doc。其中后面文件是加密的。 解压出misc.png,发现图片尾部有消息&#xff1a;flag{flag…...

编程日记 2024/6/13 3:41:04

【QT5】＜总览二＞ QT信号槽、对象树及常用函数

文章目录 前言 一、QT信号与槽 1. 信号槽连接模型 2. 信号槽介绍 3. 自定义信号槽 二、QT的对象树 三、添加资源文件 四、样式表的使用 五、QSS文件的使用 六、常用函数与宏 前言 承接【QT5】&#xff1c;总览一&#xff1e; QT环境搭建、快捷键及编程规范。若存在版…...

编程日记 2024/6/13 3:39:02

Button按钮类

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 按钮是GUI界面中应用最为广泛的控件&#xff0c;它常用于捕获用户生成的单击事件&#xff0c;其最明显的用途是触发绑定到一个处理函数。 wxPython类…...

编程日记 2024/6/13 3:38:00

代码随想录-二叉树 | 111 二叉树的最小深度

代码随想录-二叉树 | 111 二叉树的最小深度 LeetCode 111 二叉树的最小深度解题思路代码难点总结 LeetCode 111 二叉树的最小深度 题目链接 代码随想录 题目描述 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说…...

编程日记 2024/6/13 3:36:58

PCA降维算法

decomposition.h #pragma once #include <arrayfire.h>namespace decomposition {class PCA{public:af::array zero_centred(af::array...

编程日记 2024/6/13 3:35:57

Fast R-CNN 与 R-CNN的不同之处

目录 一、Fast R-CNN如何生成候选框特征矩阵 二、 关于正负样本的解释 三、训练样本的候选框 四、Fast R-CNN网络架构 4.1 分类器 4.2 边界框回归器 一、Fast R-CNN如何生成候选框特征矩阵 在R-CNN中&#xff0c;通过SS算法得到2000个候选框&#xff0c;则需要进行2000…...

编程日记 2024/6/13 3:34:56

前端开发环境：Vue、Element Plus、Axios

目录 1. Vue简介 2. Element Plus简介 3. Axios简介 4. 创建Vue项目 4.1 Node.js安装 4.2 创建Vue项目 4.3 Vue项目的结构 4.4 安装Element-Plus 4.5 安装Axios 4.6 解决跨域问题 5. 应用实例 5.1 创建Vue组件 5.2 配置路由 5.3 配置根组件 5.4 启动前端应用服…...

编程日记 2024/6/13 3:33:55

我的创作纪念日-在SCDN的5年

机缘 五年前&#xff0c;一个偶然的机会让我接触到了SCDN这个充满活力和创造力的社区。我抱着对技术的热爱和对知识的渴望&#xff0c;决定在这里开启我的创作之旅。最初&#xff0c;我成为创作者的初心&#xff0c;是希望将自己在实战项目中的经验、日常学习过程中的点滴&…...

编程日记 2024/6/13 3:32:54

AI-知识库搭建（二）GPT-Embedding模型使用

上一篇&#xff1a;AI-知识库搭建&#xff08;一&#xff09;腾讯云向量数据库使用-CSDN博客 一、Embedding模型 Embedding模型是一种将高维度的离散数据&#xff08;如文本、图像、音频等&#xff09;映射到低维度的连续向量空间的技术。这种技术广泛应用于自然语言处理&…...

编程日记 2024/6/13 3:30:52

qt网络事件之QSocketNotifier

简介 QSocketNotifier用于处理网络事件的,即事件处理器 结构 #mermaid-svg-xcNdAyHNkKqNCLQY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-xcNdAyHNkKqNCLQY .error-icon{fill:#552222;}#mermaid-svg-xcNdAyHNk…...

编程日记 2024/6/13 3:27:49

如何统计EXCEL中的数据透视表的信息？

也没什么可分析的&#xff0c;直接上代码&#xff0c;看看是不是你需要的&#xff1a; Sub GetPVT() 定义一个1000行的数组&#xff0c;如果你预判工作簿中数据透视表数量可能大小1000&#xff0c;那就改成10000&#xff0c;甚至10万&#xff0c;以确保能大于数据透视表数量即…...

编程日记 2024/6/13 3:25:47

日本结构型产品及衍生品业务变迁报告

日本结构型产品及衍生品业务变迁报告 一、业务发展阶段 阶段一&#xff1a;2000年之前 零售结构型产品几乎不存在&#xff0c;主要销售对象为机构投资者或企业。主要策略为卖出看涨期权&#xff08;covered call&#xff09;。会计记录准则对业务有重要影响&#xff0c;例如…...

编程日记 2024/6/13 3:24:47

解决Mac无法上网/网络异常的方法，重置网络

解放方法 1、前往文件夹&#xff1a;/Library/Preferences/SystemConfiguration 2 、在弹窗中输入上边的地址 3 、把文件夹中除了下图未选中的文件全部删掉&#xff0c;删除时需要输入密码 4 、重启mac 电脑就搞定了。...

编程日记 2024/6/13 3:22:44

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/8/21 5:14:59

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/8/25 21:29:32

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/8/6 0:15:41

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/6/26 5:08:48

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/7/26 23:29:41

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/8/25 11:18:43

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/8/22 5:22:50

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36