html 캔버스에서 이미지 이동

Question

이미지를 오른쪽에서 가운데로 이동하려고하는데 이것이 최선의 방법인지 확실하지 않습니다.

var imgTag = null; 
    var x = 0; 
    var y = 0; 
    var id; 

    function doCanvas() 
    { 
     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 
     var imgBkg = document.getElementById('imgBkg'); 
     imgTag = document.getElementById('imgTag'); 

     ctx.drawImage(imgBkg, 0, 0); 

     x = canvas.width; 
     y = 40; 

     id = setInterval(moveImg, 0.25); 

    } 

    function moveImg() 
    { 
     if(x <= 250) 
      clearInterval(id); 

     var canvas = document.getElementById('icanvas'); 
     var ctx = canvas.getContext("2d"); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     var imgBkg = document.getElementById('imgBkg'); 
     ctx.drawImage(imgBkg, 0, 0); 

     ctx.drawImage(imgTag, x, y); 

     x = x - 1; 
    } 

어떤 조언이 필요합니까?

Answer 1

drawImage()을 사용하면 소스 이미지의 어느 부분을 대상 캔버스에 그리게 할 지 정의 할 수 있습니다. 나는 각각 moveImg()에 대해 이전 이미지 위치를 계산하고, 이전 이미지를 imgBkg 부분으로 덮어 쓰고 새 이미지를 그릴 것을 제안합니다. 이것은 아마도 일부 컴퓨팅 성능을 절감 할 것입니다.

Answer 2

지연이없는 애니메이션의 경우 일반적으로 kinetic.js를 사용합니다.

var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
     }); 
     var layer = new Kinetic.Layer(); 

     var hexagon = new Kinetic.RegularPolygon({ 
     x: stage.width()/2, 
     y: stage.height()/2, 
     sides: 6, 
     radius: 70, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4 
     }); 

     layer.add(hexagon); 
     stage.add(layer); 

     var amplitude = 150; 
     var period = 2000; 
     // in ms 
     var centerX = stage.width()/2; 

     var anim = new Kinetic.Animation(function(frame) { 
     hexagon.setX(amplitude * Math.sin(frame.time * 2 * Math.PI/period) + centerX); 
     }, layer); 

     anim.start(); 

다음은 예제입니다.

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-animate-position-tutorial/

이유는이 때문이다 setInterval을 제안 또는 동시 애니메이션의 많은 양의가 일어날 때 특정 기능이 문제가 발생에서는 setTimeout하지만, 더 지능적으로 프레임 속도 와 kinetic.Animation 다룬다.

Answer 3

이 질문은 5 세,하지만 우리가 지금 requestAnimationFrame이 있기 때문에, 여기에 사용 바닐라 자바 ​​스크립트에 대한 접근 방법은 다음과 같습니다 setInterval을 밀리 초 단위가 아니라 초 단위로 소요

var imgTag = new Image(); 
 
var canvas = document.getElementById('icanvas'); 
 
var ctx = canvas.getContext("2d"); 
 
var x = canvas.width; 
 
var y = 0; 
 

 
imgTag.onload = animate; 
 
imgTag.src = "http://i.stack.imgur.com/Rk0DW.png"; // load image 
 

 
function animate() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas 
 
    ctx.drawImage(imgTag, x, y);      // draw image at current position 
 
    x -= 4; 
 
    if (x > 250) requestAnimationFrame(animate)  // loop 
 
}

<canvas id="icanvas" width=640 height=180></canvas>