2017-04-20 15 views
0

JavaScript를 배우고 있습니다. 그리고 저는이 작업을합니다 - 두 개의 직사각형을 그리려면 그 중 하나에서 커서를 움직여야하며 두 번째 직사각형에 나타나야합니다. 커서를 추적하는 것은 그리 어렵지 않습니다. bu 다른 곳에서 표시하는 방법을 모릅니다. 별도의 캔버스를 만들어야합니까? 커서 이미지를 표시하는 방법? 팁이 있으면 매우 고맙겠습니다!커서를 움직여 다른 장소에 표시하십시오.

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

답변

1

당신은 거기에 커서가있는 IMG을 만들어야합니다 : 여기

내가 지금이 간단한 코드입니다. 그런 다음 한 사각형 위에 마우스를 올리면 img (또는 DIV가 포함 된) CSS를 사용하여 두 번째 사각형 위에 제대로 표시하십시오. 툴팁을 표시하는 방법과 비슷합니다.

+0

img 선언을 삽입 할 때 힌트를 줄 수 있습니까? – Cassie

+0

@Cassie 당신이 (css) 할 때, 당신이 img 선언을 어디에 두어도 상관 없습니다 :'position : fixed;'그리고 짐에 그것을 숨기기 – ControlAltDel

+0

Ok, thank you :) – Cassie