캔버스 이미지 개체 내가 애니메이션을 시도하거나 자바 스크립트와 HTML5를 사용하여 객체를 이동 말을하고

Question

최근 style.left으로 움직이지 (무슨 잘못 아래에이 코드) :

---

var canvas = document.getElementById('my-first'); 
var context = canvas.getContext('2d'); 
var imageObj = new Image(); 
imageObj.onload = function() { 
    context.drawImage(imageObj,0,0,360,240); 
          }; 

imageObj.src = 'img/bakshi.jpg'; 
imageObj.style.position= 'relative'; 
imageObj.style.left = '0px'; 

function moveRight(){ 
    imageObj.style.left = parseInt(imageObj.style.left)+10+'px'; 
       }; 

---

HTML5 코드 :

**
"내 실험"

<canvas id="my-first" width="360" height="240"> 
your browser doesn't support canvas 
</canvas> 

<script src="file.js"></script> 
<audio src="i_am_bakshi.mp3" controls autoplay> </audio> 
<input type="button" value="Click Me" onclick="moveRight();" /> 
</body> 
</html> 

**

Answer 1

귀하의 실수는 당신의 이미지가 DOM의 객체가 아닌 당신이 DOM 스타일로 이동하려고하는 것입니다. 대신 업데이트 된 좌표로 drawImage()를 호출해야합니다.

var X = 0 
function moveRight(){ 
    X += 10; 
    context.drawImage(imageObj,X,0,360,240); 
} 

Answer 2

당신은 실제로 당신이 캔버스에 그리는하고, 스타일을 사용하여 이미지를 이동하지 않아야합니다.

을 다른 위치로 끌어해야합니다

context.drawImage(imageObj,parseInt(imageObj.style.left)+10,0,360,240);