我正在学习 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>
最佳答案
您应该创建一个带有光标的 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();
}
}
关于javascript - 移动光标并在另一个地方显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43523673/