カーソルを移動して別の場所に表示

JavaScriptを学習しています。私はこの作業をしています.2つの長方形を描画するには、そのうちの1つでカーソルを移動し、2番目の長方形に表示する必要があります。カーソルを追跡するのはそれほど難しいことではありません。他の場所に表示する方法はわかりません。別のキャンバスを作成する必要がありますか？カーソルイメージを表示するには？私はどんなヒントにも非常に感謝しています！あなたはそれでカーソルをIMGを作成する必要がありますカーソルを移動して別の場所に表示

<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>

出典

2017-04-20 Cassie

：ここ

は、私が今のところ持っている簡単なコードです。次に、1つの矩形をマウスで操作するときは、imgの（またはDIVを含む）cssを使用して、2番目の矩形に適切に表示します。ツールチップを表示する方法と似ています

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(); 
    } 
    }

出典

2017-04-20 15:23:54 ControlAltDel

img宣言を挿入するヒントを教えてください。 – Cassie

@Cassieあなたが（css）をしている限り、あなたがimg宣言をどこに置いても問題ありません： 'position：fixed;'そしてロード時に非表示にします – ControlAltDel

Ok、ありがとう:) – Cassie

カーソルを移動して別の場所に表示

答えて

関連する問題