在 html 画布上移动图像

新手上路,请多包涵

我正在尝试将图像从右侧移动到中心,但我不确定这是否是最佳方式。

 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;
    }

有什么建议吗?

原文由 iJK 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 154
1 个回答

这个问题已有 5 年历史,但由于我们现在有了 requestAnimationFrame() 方法,这里有一个使用 vanilla JavaScript 的方法:

 var imgTag = new Image(),
    canvas = document.getElementById('icanvas'),
    ctx = canvas.getContext("2d"),
    x = canvas.width,
    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>

原文由 user1693593 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题