javascript - Canvas - 获取图像位置

Question

我正在使用 Canvas ，我有这段代码 -

        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 Logo 从 (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

为什么不直接清除 Canvas ，然后绘制图像，移动您的 y 坐标。

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

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