Перемещение изображения на javascript canvas

Я пытаюсь получить очень простую анимацию для работы, где изображение, загруженное на Javascript Canvas, просто скользит вправо. Следующий код работает с рисунком прямоугольника, но когда я пытаюсь вставить изображение, ничего не загружается, но я не получаю сообщений об ошибках. Мне нужно заставить его работать только с Javascript.Перемещение изображения на javascript canvas

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 canvas

ответ

Смежные вопросы