클릭하면 어떻게 캔버스 그림을 움직입니까?

Question

저는 캔버스에 5 각형 그림이 하나 있습니다. 마우스를 클릭 한 위치로 옮기고 싶습니다.

CODE

<canvas id="fld" width="1000px" height="800"></canvas> 
    <script type="text/javascript"><!-- 
    onload = function() { draw(); }; 
    function draw() { 
     var canvas = document.getElementById('fld'); 
     if (! canvas || ! canvas.getContext) {return false;} 
     var ctx = canvas.getContext('2d'); 
     //Pentagon 
     ctx.beginPath(); 
     ctx.strokeStyle = 'rgb(255, 0, 0)'; 
     ctx.moveTo(100,10); 
     for (var i=1;i<=5; ++i) { 
     th=i * 2 * Math.PI/5; 
     x=100+90*Math.sin(th); 
     y=100-90*Math.cos(th); 
     ctx.lineTo(x,y); 
     } 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.arc(900, 60, 40, 0, 2 * Math.PI, false); 
     ctx.fillStyle = "rgb(255, 0, 0)"; 
     ctx.fill(); 
     ctx.strokeStyle = "black"; 
     ctx.stroke(); 
    } 
    </script> 

Answer 1

당신은 몇 가지 변경해야하고이 작동합니다.

먼저 draw() 함수를 변경하여 그림이 그려지는 X 및 Y 위치라는 두 개의 매개 변수를 가져야합니다. 그런 다음 사용 된 하드 코딩 된 값을 변경하여 전달 된 X 및 Y 값을 기반으로합니다.

둘째, 캔버스에 onclick 처리기를 추가해야합니다. 클릭 이벤트를 받으면 마우스가 클릭 된 캔버스의 X 및 Y 좌표를 가져올 수 있습니다.

당신은 캔버스를 지우고

룩업이 버튼을 누를 때 마우스의 위치를 ​​얻을 수있는 방법을 핸들러를 온 클릭 마우스 클릭 X와 Y로 업데이트 된 그리기 함수를 호출 할 수 있습니다. addEventListener를 사용하여 클릭 핸들러를 첨부해야 함수가 전달 된 이벤트를 가져올 수 있습니다. 그런 다음 이벤트 객체에서 클릭의 좌표를 추출 할 수 있습니다.