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

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

javascript

Javascript 移动光标并将其显示在其他位置,javascript,cursor,cursor-position,onmousemove,Javascript,Cursor,Cursor Position,Onmousemove,我正在学习JavaScript。我有一个任务-画两个矩形，在其中一个，我应该移动光标，它应该出现在第二个矩形中。跟踪光标并不难，但我不知道如何在其他地方显示它。我需要创建单独的画布吗？如何显示光标图像？我将非常感谢任何提示以下是我目前拥有的一个简单代码： <html> <body> <canvas id="myCanvas" width="800" height="600" ></canvas> <script>

我正在学习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>


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；
变量粗略；
document.onmousemove=函数（e）{
cursorX=e.pageX；
粗略地=e.pageY；
}

您应该创建一个带有光标的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();
    }
  }

你能给我一个提示，把img声明放在哪里吗？@Cassie你把img声明放在哪里真的不重要，只要你这样做（css）：

position:fixed然后将其隐藏在load@Cassie不客气。我只是在想，你可能想用cssposition:relative而不是fixed。这样，如果您滚动，img应该/将与框一起滚动。我只是在我的文档的一个部分中做了一些工具提示，其中有position:fixed，这就是为什么这对我有效。德国劳埃德船级社！非常感谢。祝你愉快：）我又错了。答案是位置：绝对