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

爱吃鸡爪zi

于 2024-06-12 19:26:52 发布

阅读量137

点赞数 2

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_74197037/article/details/139634800

版权

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属性为你的图片URL
    backgroundImage.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换为自己的即可。下面是我的运行截图：

爱吃鸡爪zi

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
一个小的画布Canvas页面，记录点的轨迹

实现了一个点从画布的（0,0）到（canvas.width，canvas.height）的一个实现其中我在canvas里面加了一个背景，你们只需要把你们的图片放在上面即可实现一小段代码的运行，好久没有说知识点了！打算更一些计网和数据库，暑假说吧！其中，没有使用什么算法，// 设置Image对象的src属性为你的图片URL。把这个的src换为自己的即可。建议从draw函数看起走。
复制链接

扫一扫