帆布 - 获取图像位置

我使用的画布，我有这样的代码 -
帆布 - 获取图像位置

 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）谷歌标志移动到（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。

来源

2010-07-09 Yosi

我想你可以用JavaScript和HTML来做到这一点。不知道你为什么要使用画布。 – 2010-07-09 23:34:06

为什么不只是清除画布，然后绘制图像，移动了你的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

来源

2010-07-09 23:23:40

我想过 - 但是如果你已经加载了10张图片并在画布上画了一些矩形。并且您只想移动一个矩形，您需要在每个循环中重复绘制一遍又一遍 – Yosi 2010-07-10 05:44:05

不是真的，请清除感兴趣的矩形，然后再绘制一遍。这一点大约10张图片在开始时会很高兴，顺便说一句。 – 2010-07-11 01:34:11

可以使用递归函数，如：

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

来源

2010-07-10 01:46:39

帆布 - 获取图像位置

回答

相关问题