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

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

news 2026/3/27 2:12:27

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页面，记录点的轨迹

相关文章：

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

docker-compose教程

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

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

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

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

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

CTF Show MISC做题笔记

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

Button按钮类

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

PCA降维算法

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

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

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

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

qt网络事件之QSocketNotifier

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

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

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

【独家逆向分析】：2026年Python官方AOT预编译包（.so/.dylib/.dll）签名验证失败报错的底层机制——绕过签名强制校验的合规临时方案

MangoHud资源占用实时监控：图表工具终极指南

从 POST 到落库回写：彻底讲透 SAP Gateway 中 Create Operation 的实现

OBS高级计时器：提升直播专业度的时间管理工具

3分钟快速找回QQ号：手机号逆向查询终极指南

手把手教你用两块STM32F103C8T6实现CAN总线点对点通信（附完整代码）

脑皮层房地产：公司在我的神经突触建数据中心

W-TRS-5.5D7红外测温：电炖锅智能测温的革新力量

2026 机器人行业发展前景与 AI 获客方案深度解析

刷题无效、偏科严重？脑能模型解构 K12 学习底层能力问题