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

画布-获取图像位置

  •  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
  •  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);
    
    推荐文章