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，所以使用vanilla JavaScript的方法就是这样：

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

对于无滞后动画，我通常使用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 4

是的，我知道这个问题已有10年了，但是无论如何我都会回答，所以这是我的答案。

这是index.html文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            Animate an Image on a Canvas
        </title>
    </head>
    <body>
        <canvas id="canvas" class="canvas" width="250" height="150"></canvas>
    </body>
    <script src="script.js"></script>
</html>

这是script.js文件：

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

var myImg = new Image();
var myImgPos = {
    x: 250,
    y: 125,
    width: 50,
    height: 25
}

function draw() {
    myImg.onload = function () {
        ctx.drawImage(myImg, myImgPos.x, myImgPos.y, myImgPos.width, myImgPos.height);
    }
    
    myImg.src = "myImg.png";
}

function moveMyImg() {
    ctx.clearRect(myImgPos.x, myImgPos.y, myImgPos.x + myImgPos.width, myImgPos.y + 
        myImgPos.height);
    myImgPos.x -= 5;
}

setInterval(draw, 50);
setInterval(moveMyImg, 50);

我希望这对您有帮助！

在html画布上移动图像

4 个答案: