Canvas绘图详解_技术问答

慕姐8450365

111: 2023-10-10 0回答·277浏览

qq_天冷团成球_0

如果鼠标位置是重叠的位置，怎么只让最上层的选中呢？

已解决

2019-08-19 1回答·1074浏览

慕函数5127544

难道你们参考老师的代码，浏览器不会报错吗？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canvas绘图详解 16</title>
    <style>
      canvas {
        border: 1px solid #aaa;
        display: block;
        margin: 50px auto;
      }
    </style>
  </head>
  <body>

    <canvas id="canvas" width="800" height="800">不好意思，您的浏览器不支持canvas。</canvas>

    <script type="text/javascript">

      var balls = [];
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      window.onload = function() {

        for (var i = 0; i < 10; i++) {
          var ball = {
            x: Math.random() * 800,
            y: Math.random() * 800,
            r: Math.random() * 50 + 20
          };
          balls[i] = ball;
        }

        canvas.addEventListener("mousemove", detect);

      };

      function draw(x, y) {

        for (var i = 0; i < balls.length; i++) {
          ctx.beginPath();
          ctx.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2);
          if (ctx.isPointInPath(x, y)) {
            ctx.fillStyle = "#ff0000";
          } else {
            ctx.fillStyle = "#058";
          }
          ctx.fill();
        }

      }

      function detect(e) {

        var x = e.clientX - canvas.getBoundingClientRect().left;
        var y = e.clientY - canvas.getBoundingClientRect().top;

        draw(x, y);

      }

    </script>

  </body>
</html>

2017-12-01 1回答·1533浏览