代码之家 › 专栏 › 技术社区 › Yosi

画布-获取图像位置

html5 canvas javascript

1

Yosi · 技术社区 · 16 年前

我正在使用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 !");
    }

我想让这个动画,使谷歌标志从(0,0)移动到(0120)。

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

                },250);

谢谢,尤西。

2 回复 | 直到 16 年前

1

3

groovecoder mkluwe 12 年前

为什么不清理画布,然后画图像,移动你的y坐标。

也可以使用translate,本页提供了一个示例: 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

2

Nick Canzoneri 16 年前

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