在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

这个问题已有5年历史了，但是由于我们现在有了requestAnimationFrame，因此以下是使用原始JavaScript的方法：

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>

Answer 2

drawImage()允许定义源图像的哪一部分绘制在目标画布上。我建议每个moveImg()计算前一个图像位置，用 的该部分覆盖前一个图像imgBkg，然后绘制新图像。据说这会节省一些计算能力。