移动光标并显示在另一个地方

Question

我正在学习JavaScript。我有这个任务 - 绘制两个矩形，在其中一个中，我应该移动光标，它应该出现在第二个矩形中。跟踪光标并不难，但我不知道如何在其他地方显示它。我需要创建单独的 canvas 吗？如何显示光标图像？如果有任何提示，我将不胜感激！

这是我目前拥有的一个简单代码：

<html>   
<body>
    <canvas id="myCanvas" width="800" height="600" ></canvas>
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.rect(20, 20, 300, 200);
    ctx.stroke();

    ctx.rect(350, 20, 300, 200);
    ctx.stroke();

    var cursorX;
    var cursorY;
    document.onmousemove = function(e){
        cursorX = e.pageX;
        cursorY = e.pageY;
    }
    </script> 
</body>

Answer 1

您应该创建一个带有光标的 IMG。然后，当您在一个矩形上移动时，使用 img（或包含 DIV 的）css 将其正确显示在第二个矩形上。它类似于您可能显示工具提示的方式

function (event) {
  var x = event.pageX;
  var y = event.pageY;
    var mouseImg = document.getElementById('mouseImg');
    if (mouseImg ) {
      $(mouseImg ).css('left',(x + rectangleOffset.x) + 'px');
      $(mouseImg ).css('top',y + rectangleOffset.y + 'px');
      $(mouseImg ).show();
    }
  }

移动光标并显示在另一个地方

Move cursor and display it in another place

javascript

cursor

cursor-position

onmousemove