Question

我正在使用画布，我有这个代码 -

        var myCanvas = document.getElementById("myCanvas"),
        ctx = null;

    // Check for support - Feature Support and not Browser Support
    if ( myCanvas.getContext) {
        // Getting the context future 3d ^_^
        ctx = myCanvas.getContext("2d");

        var googleLogo = new Image();
        googleLogo.src = 'img.png';
        googleLogo.onload = function(){
            // Adding our image..
            ctx.drawImage(googleLogo,0,0); // drawImage(image object,x,y)
        };

        }else{
        alert("You don`t have support in CANVAS !");
    }

我想让这个动画让Google徽标从（0,0）移动到（0,120）。
从理论上讲，我知道我需要使用setInterval，每隔x秒我需要增加图像的y，但是如何改变图像的y位置呢？

                    setInterval(function(){
                    var imgY = ?; // How I can get my image y?or x?
                    if(imgY != 120){
                        imgY += 2;   // adding the velocity
                    }

                },250);

谢谢，Yosy。

Answer 1

为什么不清除画布，然后绘制图像，移动y坐标。

或者你可以使用翻译，这个页面给出了一个例子： https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas

以下是在画布上制作动画的示例： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations

Answer 2

您可以使用递归函数，如：

 function iterate(dy){
    if(dy < 120){
      setTimeout(function(){
        ctx.clearRect(0,0,500,500);
        ctx.drawImage(googleLogo,0,dy);
        iterate(dy+1);  
      },50);
    }
  }
  iterate(0);

画布 - 获取图像位置

2 个答案: