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

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换为自己的即可。下面是我的运行截图：