HTML（7）canvas随机画点并连接

什么都不会…

已于 2024-01-11 10:04:34 修改

阅读量449

点赞数 10

分类专栏：前端文章标签： html 前端 javascript

于 2024-01-10 14:16:07 首次发布

本文链接：https://blog.csdn.net/qq_52187093/article/details/135502374

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title>随机分布二十个点并连接</title>
  <style type="text/css">
    canvas {
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // 生成20个随机坐标点
    var points = [];
    for (var i = 0; i < 20; i++) {
      var x = Math.floor(Math.random() * 500) + 50;
      var y = Math.floor(Math.random() * 300) + 50;
      points.push({x: x, y: y});
    }

    // 画出随机坐标点
    for (var i = 0; i < 20; i++) {
      context.beginPath();
      context.arc(points[i].x, points[i].y, 5, 0, 2 * Math.PI);
      context.fillStyle = "black";
      context.fill();
    }

    // 连接任意两个点
    var selectedPoints = [];
    canvas.addEventListener("mousedown", function(event) {
      var mouseX = event.pageX - canvas.offsetLeft;
      var mouseY = event.pageY - canvas.offsetTop;
      for (var i = 0; i < 20; i++) {
        if (Math.pow(mouseX - points[i].x, 2) + Math.pow(mouseY - points[i].y, 2) <= Math.pow(5, 2)) {
          selectedPoints.push(points[i]);
          if (selectedPoints.length == 2) {
            context.beginPath();
            context.moveTo(selectedPoints[0].x, selectedPoints[0].y);
            context.lineTo(selectedPoints[1].x, selectedPoints[1].y);
            context.strokeStyle = "red";
            context.stroke();
            selectedPoints = [];
          }
          break;
        }
      }
    });
  </script>
</body>
</html>

运行结果：