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

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

news 文章来源：https://blog.csdn.net/weixin_74197037/article/details/139634800 2025/1/6 17:21:51

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

[12] 使用 CUDA 进行图像处理

使用 CUDA 进行图像处理 当下生活在高清摄像头的时代&#xff0c;这种摄像头能捕获高达1920*1920像素的高解析度画幅。想要实施的处理这么多的数据&#xff0c;往往需要几个TFlops地浮点处理性能&#xff0c;这些要求CPU也无法满足通过在代码中使用CUDA&#xff0c;可以利用GP…...

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

MyBatisPlus代码生成器（交互式）快速指南

引言 本片文章是对代码生成器(交互)快速配置使用流程&#xff0c;更多配置方法可查看官方文档&#xff1a; 代码生成器配置官网 如有疑问欢迎评论区交流&#xff01; 文章目录 引言演示效果图引入相关依赖创建代码生成器对象引入Freemarker模板引擎依赖支持的模板引擎 MyBat…...

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

深度学习模型训练之日志记录

在深度学习模型训练过程中&#xff0c;进行有效的训练日志记录是至关重要的。以下是一些常见的策略和工具来实现这一目标&#xff1a; 1. 使用TensorBoard TensorBoard是TensorFlow提供的一个可视化工具&#xff0c;用于记录和展示训练过程中的各种指标。 设置TensorBoard&a…...

编程日记 2024/6/13 3:16:37

深入理解Python中的装饰器

装饰器是Python中一个强大且灵活的工具，允许开发者在不修改函数或类定义的情况下扩展或修改其行为。装饰器广泛应用于日志记录、访问控制、缓存等场景。本文将详细探讨Python中的装饰器，包括基本概念、函数装饰器和类装饰器、内置装饰器以及装饰器的高级用法。 目录 装饰器概…...

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

基于springboot的人力资源管理系统源码数据库

传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;员工信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广大用户的…...

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

如何舒适的使用VScode

安装好VScode后通常会很不好用&#xff0c;以下配置可以让你的VScode变得好用许多。 VScode的配置流程 1、设置VScode中文2、下载C/C拓展&#xff0c;使代码可以跳转3、更改编码格式4、设置滚轮缩放5、设置字体6、设置保存自动改变格式7、vscode设置快捷代码 1、设置VScode中文…...

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

【微信小程序】开发环境配置

目录 小程序的标准开发模式&#xff1a; 注册小程序的开发账号 安装开发者工具 下载 设置外观和代理 第一个小程序 -- 创建小程序项目 查看项目效果 第一种&#xff1a;在模拟器上查看项目效果 项目的基本组成结构 小程序代码的构成 app.json文件 project.config…...

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

启动盘镜像制作神器(下载即用)

一、简介 1、一款受欢迎且功能强大的USB启动盘制作工具，允许用户将操作系统镜像文件（如Windows或Linux的ISO文件）制作成可引导的USB启动盘。它支持多种操作系统，包括Windows、Linux和各种基于UEFI的系统。Rufus的一个显著特点是制作速度快，据称其速度比其他常用工具如UNet…...

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

PHP框架详解 - Symfony框架

引言 在现代Web开发中&#xff0c;PHP作为一种灵活且功能强大的编程语言&#xff0c;广泛应用于各种Web应用程序的开发中。为了提高开发效率、代码的可维护性和可扩展性&#xff0c;开发者通常会选择使用框架来构建应用程序。在众多PHP框架中&#xff0c;Symfony以其强大的功能…...

编程日记 2024/6/13 3:03:23

鸿蒙开发：【线程模型】

线程模型 线程类型 Stage模型下的线程主要有如下三类&#xff1a; 主线程 执行UI绘制。管理主线程的ArkTS引擎实例&#xff0c;使多个UIAbility组件能够运行在其之上。管理其他线程的ArkTS引擎实例&#xff0c;例如使用TaskPool&#xff08;任务池&#xff09;创建任务或取消…...

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

做网站须要什么技术/百度爱采购怎样入驻

0x00 简介 元组&#xff08;tuple&#xff09;&#xff0c;相当于不可变的列表。元组通过圆括号中用逗号分割的项目定义。 特点&#xff1a;1、有序的集合&#xff1b;2、通过偏移来取数据&#xff1b;3、属于不可变对象&#xff0c;不能在于原地修改内容&#xff0c;没有排序。…...

编程日记 2025/1/6 8:45:33

什么网站可以接单做设计/seo扣费系统源码

相关文章&#xff1a; 小议 Java 类的初始化 文章目录编译期常量运行时常量相关助记符附&#xff1a;常量入栈指令References关于常量&#xff0c;在《Java 核心技术 卷 I》中是这么定义的&#xff1a;在 Java 中&#xff0c;利用关键字 final 指示常量。一旦被赋值之后&#…...

编程日记 2025/1/6 6:52:17

深圳分销网站设计公司/seo优化怎么做

0、序言 因为本人目前用的台式机配的win7系统&#xff0c;一直懒得换系统&#xff0c;对应的mongdb版本&#xff0c;选择了4.2.16 &#xff0c;经测试&#xff08;都是选择的稳定版&#xff09;&#xff1a; 版本是否可用5.0.34.4.94.2.16√ 其他平台和系统自行测试。 1、下…...

编程日记 2025/1/6 6:10:49

网络营销技能大赛优秀作品/合肥网络公司seo

CSS 选择器总结2021-06-13 21:35:37CSS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面&#xff0c;而不用改变页面的标签。好一段时间不用 CSS &#xff0c;有一些基础知识的记忆有点模糊了&#xff0c;今天再做一次总结记录&#xff0c;…...

编程日记 2025/1/6 4:25:48

手机网站制作合同/国内免费b2b网站大全

你好&#xff0c;电脑录屏有很多种不同的需求场景&#xff0c;有时候只需录制电脑画面&#xff0c;有时候要加上麦克风声音、摄像头画面&#xff0c;有时候则要在录制过程种对画面加以批注。根据不同的需求可选择不同的方法。下面分享三款不同的软件&#xff1a;专业的、免费的…...

编程日记 2025/1/6 3:17:41

企业网站制作正规公司/十种营销方式

在C语言程序开发中&#xff0c;提到动态内存分配时&#xff0c;基本上每个程序员都明白 calloc() 和 malloc() 库函数的区别——calloc() 函数不仅分配内存&#xff0c;还会将分配后的内存清零&#xff0c;而 malloc() 函数则对分配好的内存不做任何操作。calloc() 函数的效率比…...

编程日记 2025/1/6 2:34:56