캔버스 화살표를 사용하여 rect를 이동하는 방법

오늘 캔버스를 배우기 시작한 간단한 사각형을 만들기 시작했습니다 화살표 키를 사용하여이 사각형을 이동해야하지만 moveTo 함수는 아무 것도하지 않는 것처럼 보입니다 나는 이것을 성취 할 수 있는가? 이것은 당신이 fillRect 할로 그려 한 후에는 캔버스 주위에 사각형을 이동할 수 없습니다 지금까지캔버스 화살표를 사용하여 rect를 이동하는 방법

<html> 
    <head> 
     <title></title> 
    </head> 

    <body> 
     <canvas id="myCanvas" width="600" height="250" style="border:1px 
     solid black;"> 
     </canvas> 

    <script type="text/javascript"> 
     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 
     context.fillStyle = "green"; 

     var x = 50,y=5,w=100,h=100; 
     context.fillRect(x,y,w,h); 

     document.onkeydown = function move() 
     { 
      switch(window.event.keyCode) 
      { 
       case 37: 
       { 
        //left 
        context.moveTo(x++,y); 
        break; 
       } 
       case 38: 
       { 
        console.log('up'); 
        break; 
       } 
       case 39: 
       { 
        console.log('right'); 
        break; 
       } 
       case 40: 
       { 
        console.log('down'); 
        break; 
       } 
      } 
     } 
    </script> 
    </body> 
    </html>

출처

2014-04-06 user254883

내 코드입니다.

캔버스는 단지 이미지이므로 사각형은 캔버스에 칠한 움직이지 않는 모양이됩니다.

모양을 "이동"하려면 캔버스를 지우고 모양을 새 위치로 다시 그려야합니다.

BTW, context.moveTo는 그리기 펜을 지정된 위치로 이동하도록 컨텍스트에 알리는 경로 명령입니다. 캔바스에서 기존 모양을 움직이지 않습니다.

예를 들어, 키 핸들러에 대응하는 왼쪽 화살표 키

변경 X 좌측 좌표 x-- 단계;
캔버스 지우기 : context.clearRect (0,0, canvas.width, canvas.height);
새 위치에서 사각형을 다시 그리기 : context.fillRect (x, y, w, h);

출처

2014-04-06 18:55:34 markE

캔버스 화살표를 사용하여 rect를 이동하는 방법

답변

관련 문제