在javascript畫布上移動圖像

我試圖讓一個非常簡單的動畫工作，其中一個圖像加載到Javascript Canvas只是向右滑動。下面的代碼與繪製矩形一起工作，但是當我嘗試插入圖像時沒有任何加載，但我沒有收到任何錯誤消息。我需要讓它只用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();

來源

2014-01-08 user3174547

問題是您的繪圖函數中的[x，y]值未定義。

演示：http://jsfiddle.net/m1erickson/qAm39/

這是你的代碼的重構，以保持對事物的正確範圍：

<!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>

來源

2014-01-08 18:42:40 markE

在javascript畫布上移動圖像

回答

相關問題