Question

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

这是我现在的简单代码：

<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＆＃39; s）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();
    }
  }

移动光标并将其显示在其他位置

1 个答案: