在javascript画布上移动图像_Javascript_Image_Canvas

在javascript画布上移动图像

javascript image canvas

在javascript画布上移动图像,javascript,image,canvas,Javascript,Image,Canvas,我正在尝试制作一个非常简单的动画，加载到Javascript画布上的图像只是向右滑动。以下代码适用于绘制的矩形，但当我尝试插入图像时，不会加载任何内容，但不会收到任何错误消息。我需要让它只使用Javascript window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||

我正在尝试制作一个非常简单的动画，加载到Javascript画布上的图像只是向右滑动。以下代码适用于绘制的矩形，但当我尝试插入图像时，不会加载任何内容，但不会收到任何错误消息。我需要让它只使用Javascript

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var canvas = document.getElementById("canvas"),
    cx = canvas.getContext("2d");

function Card(x,y){
  this.x = x || 0;
  this.y = y || 0;


  this.draw = function(){
    var img = new Image();
    img.onload = function() 
    {
        cx.drawImage(img, x, y);
    }
    img.src = "images/back.jpg";
  }
}

var myCard = new Card(50,50);

function loop(){
  cx.clearRect(0, 0, canvas.width, canvas.height);

  myCard.x++;

  myCard.draw();

  requestAnimFrame(loop);
}
loop();

问题是[x，y]值在draw函数中未定义

演示：

下面是对代码的重构，以使其保持在适当的范围内：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){


    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame    ||
              window.oRequestAnimationFrame      ||
              window.msRequestAnimationFrame     ||
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    var canvas = document.getElementById("canvas"),
        cx = canvas.getContext("2d");

    function Card(x,y){
      this.x = x || 0;
      this.y = y || 0;
      this.img=new Image();

      this.init=function(){

        // "var self=this" makes myCard available in the img.onload function
        // otherwise "this" inside img.onload refers to the img
        var self=this;

        this.img.onload = function() 
        {
            self.draw();
            loop();
        }
        this.img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house16x16.png";  
      }

      // x,y need to be this.x and this.y

      this.draw = function(){
        cx.drawImage(this.img, this.x, this.y);
      }

    }

    var myCard = new Card(50,50);
    myCard.init();

    function loop(){

      if(myCard.x<canvas.width-20){
          requestAnimFrame(loop);
      }

      cx.clearRect(0, 0, canvas.width, canvas.height);

      myCard.x++;

      myCard.draw();

    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>


正文{背景色：象牙；}
#画布{边框：1px纯红；}
$（函数（）{
window.requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var canvas=document.getElementById（“canvas”），
cx=canvas.getContext（“2d”）；
功能卡（x，y）{
这个.x=x | | 0；
这个.y=y | | 0；
this.img=新图像（）；
this.init=函数（）{
//“var self=this”使myCard在img.onload函数中可用
//否则，img.onload中的“this”指的是img
var self=这个；
this.img.onload=函数（）
{
self.draw（）；
loop（）；
}
this.img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house16x16.png";  
}
//x，y必须是这个，x和这个
this.draw=函数（）{
cx.drawImage（this.img、this.x、this.y）；
}
}
var myCard=新卡（50,50）；
myCard.init（）；
函数循环（）{
如果（myCard.x