使用事件监听器在 canvas 中移动形状

Question

我已经完成了代码，但我唯一不能做的是，我只希望当鼠标进入圆圈时圆圈移动，然后它跟随鼠标移动，如下所示。当我进入 window 时圆圈开始移动，我希望它在我进入圆圈时开始移动我无法在此处应用语法，如有任何帮助，我们将不胜感激

<!--
For this assignment, create an event listener that is triggered when the mouse 
moves through the #cont div. Using pageVars and offsets, dynamically set the
top and left style properties of the #circ1 div so that the circle follows the 
user's mouse.
-->


<html>

<head>
  <title>basic_canvas</title>

  <style>
    div {
      position: absolute;
    }
    
    #cont {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 800px;
      height: 600px;
    }
    
    .col {
      width: 365px;
      height: 380px;
      padding: 10px;
      background-color: rgba(110, 25, 75, 0.2);
    }
    
    #c2 {
      left: 405px;
    }
    
    .lower {
      width: 100%;
      height: 200px;
      top: 400px;
    }
    
    .circ {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background: -webkit-linear-gradient(top, #3498db, #2980b9);
      background: -moz-linear-gradient(top, #3498db, #2980b9);
      background: -ms-linear-gradient(top, #3498db, #2980b9);
      background: -o-linear-gradient(top, #3498db, #2980b9);
      background: linear-gradient(to bottom, #3498db, #2980b9);
      box-shadow: 0px 0px 5px black;
    }
    
    .circ:hover {
      background: -webkit-linear-gradient(top, #3cb0fd, #3498db);
      background: -moz-linear-gradient(top, #3cb0fd, #3498db);
      background: -ms-linear-gradient(top, #3cb0fd, #3498db);
      background: -o-linear-gradient(top, #3cb0fd, #3498db);
      background: linear-gradient(to bottom, #3cb0fd, #3498db);
      box-shadow: 0px 0px 10px black;
    }
    
    .text {
      width: 360px;
    }
    
    #circ1 {
      top: 20px;
      left: 350px;
    }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <script>
    //global vars
    var mycanvas;
    var ctx;

    //make a ready handler for our page to trigger my javascript
    $(document).ready(function() {
      //event listener attached to the #cont element here
      $("#cont").mouseenter(function() {
        $(document).mousemove(function(e) {
          var x = e.pageX;
          var y = e.pageY;
          $("#circ1").css({
            "top": y,
            "left": x
          });
        });
      });

    });

    /*
     *  write a function called by the mousemove listener
     *  inside this function, calculate the x and y coordinates
     *  of the mouse and translate these to top and left css properties
     *  finally, set the top and left of the #circ1 element
     *  offsetX and offsetY are the same thing as mouseX and mouseY ->system variables
        
        
     *  this works for chrome
        var posX = e.offsetX;
        var posY = e.offsetY;
        
     *  this works for firefox
        var posX = e.pageX - canvas.offsetLeft;
        var posY = e.pageY - canvas.offsetTop;
     * 
    */




    function degToRad(deg) {
      radians = (deg * Math.PI / 180) - Math.PI / 2;
      return radians;
    }

    function getRandomFloat(min, max) {
      return Math.random() * (max - min) + min;
    }

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>

</head>

<body>

  <div id="cont">
    <div class="col" id="c1">
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam turpis, maximus sit amet gravida ut, vestibulum nec lectus. Sed risus est, ultricies non quam in, tristique bibendum augue. Etiam accumsan est viverra lectus feugiat interdum. Duis
        dignissim nisi consectetur suscipit consectetur. Phasellus nulla augue, tincidunt ac pellentesque faucibus, iaculis a arcu. Mauris pretium, augue ut malesuada cursus, lorem mauris sodales sapien, vel mollis libero libero vel nisi. Nam viverra
        arcu at nibh vehicula, non sagittis arcu tincidunt.
      </div>
    </div>

    <div class="col" id="c2">
      <div class="text">
        Aenean sagittis et nulla quis interdum. Nam est tellus, lobortis eget faucibus a, porta vel dolor. Nulla quam magna, volutpat ut malesuada quis, cursus et neque. Nulla facilisis rutrum eros, congue porta orci maximus vitae. Phasellus a sollicitudin sem.
        Maecenas vestibulum odio nec justo efficitur, quis consequat orci tempus. Aliquam erat volutpat. Fusce mollis facilisis justo vitae auctor. Maecenas porttitor luctus urna, ultricies volutpat purus elementum sed. Mauris maximus sodales ante, ut
        lobortis libero faucibus quis. Cras turpis leo, vehicula sed mattis ac, dignissim egestas sem. Ut elementum a tellus vel faucibus.
      </div>
    </div>

    <div class="lower" id="l1">

      <div class="circ" id="circ1"></div>

    </div>

  </div>

</body>

</html>

Answer 1

我不知道为什么这对我不起作用。当我添加 jquery 时，我得到的控制台充满了错误。这是 link 到 codepen demo

我所做的更改：

在 JavaScript 中，我正在使用 var e.clientX-50 和 e.clientY-50；而不是 pageX 和 pageY。 -50 是因为我希望鼠标位于圆心。否则我会得到左上角的指针 od .circ
在CSS

我添加了 .circ{position:absolute;} 否则 top 和 left 属性毫无意义。请检查代码以查看我删除的代码行。

 //global vars
    var mycanvas;
    var ctx;

    //make a ready handler for our page to trigger my javascript
    $(document).ready(function() {
      //event listener attached to the #cont element here
      //$("#cont").mouseenter(function() {
        $(document).mousemove(function(e) {
          console.log(e)
          var x = e.clientX-50;
          var y = e.clientY-50;
          $("#circ1").css({
            "top": y,
            "left": x
          });
        });
      });

    //});

    /*
     *  write a function called by the mousemove listener
     *  inside this function, calculate the x and y coordinates
     *  of the mouse and translate these to top and left css properties
     *  finally, set the top and left of the #circ1 element
     *  offsetX and offsetY are the same thing as mouseX and mouseY ->system variables
     *  this works for chrome
        var posX = e.offsetX;
        var posY = e.offsetY;

     *  this works for firefox
        var posX = e.pageX - canvas.offsetLeft;
        var posY = e.pageY - canvas.offsetTop;
     * 
    */




    function degToRad(deg) {
      radians = (deg * Math.PI / 180) - Math.PI / 2;
      return radians;
    }

    function getRandomFloat(min, max) {
      return Math.random() * (max - min) + min;
    }

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

  div {
      position: absolute;
    }

    #cont {
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 800px;
      height: 600px;
    }

    .col {
      width: 365px;
      height: 380px;
      padding: 10px;
      background-color: rgba(110, 25, 75, 0.2);
    }

    #c2 {
      left: 405px;
    }

    .lower {
      width: 100%;
      height: 200px;
      /*top: 400px;*/
    }

    .circ {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background: -webkit-linear-gradient(top, #3498db, #2980b9);
      background: -moz-linear-gradient(top, #3498db, #2980b9);
      background: -ms-linear-gradient(top, #3498db, #2980b9);
      background: -o-linear-gradient(top, #3498db, #2980b9);
      background: linear-gradient(to bottom, #3498db, #2980b9);
      box-shadow: 0px 0px 5px black;
      position:absolute;
    }

    .circ:hover {
      background: -webkit-linear-gradient(top, #3cb0fd, #3498db);
      background: -moz-linear-gradient(top, #3cb0fd, #3498db);
      background: -ms-linear-gradient(top, #3cb0fd, #3498db);
      background: -o-linear-gradient(top, #3cb0fd, #3498db);
      background: linear-gradient(to bottom, #3cb0fd, #3498db);
      box-shadow: 0px 0px 10px black;
    }

    .text {
      width: 360px;
    }
    /*
    #circ1 {
      top: 20px;
      left: 350px;
    }*/

<div id="cont">
    <div class="col" id="c1">
      <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam turpis, maximus sit amet gravida ut, vestibulum nec lectus. Sed risus est, ultricies non quam in, tristique bibendum augue. Etiam accumsan est viverra lectus feugiat interdum. Duis
        dignissim nisi consectetur suscipit consectetur. Phasellus nulla augue, tincidunt ac pellentesque faucibus, iaculis a arcu. Mauris pretium, augue ut malesuada cursus, lorem mauris sodales sapien, vel mollis libero libero vel nisi. Nam viverra
        arcu at nibh vehicula, non sagittis arcu tincidunt.
      </div>
    </div>

    <div class="col" id="c2">
      <div class="text">
        Aenean sagittis et nulla quis interdum. Nam est tellus, lobortis eget faucibus a, porta vel dolor. Nulla quam magna, volutpat ut malesuada quis, cursus et neque. Nulla facilisis rutrum eros, congue porta orci maximus vitae. Phasellus a sollicitudin sem.
        Maecenas vestibulum odio nec justo efficitur, quis consequat orci tempus. Aliquam erat volutpat. Fusce mollis facilisis justo vitae auctor. Maecenas porttitor luctus urna, ultricies volutpat purus elementum sed. Mauris maximus sodales ante, ut
        lobortis libero faucibus quis. Cras turpis leo, vehicula sed mattis ac, dignissim egestas sem. Ut elementum a tellus vel faucibus.
      </div>
    </div>

    <div class="lower" id="l1">

      <div class="circ" id="circ1"></div>

    </div>

  </div>

使用事件监听器在 canvas 中移动形状

moving shape in canvas using eventlistener

javascript

event-listener