加載圖像，然後使用canvas對其進行動畫製作/ javascript

Question

對於畫布而言，我是全新的。我試圖在畫布上繪製圖像，然後對其進行動畫處理。現在我無法在屏幕上繪製圖像。圖像根本不顯示。代碼

這裏部分：

var car = new Image(); 
car.src = "http://i.imgur.com/8jV4DEn.png"; 
car.x = 40; car.y = 60; 

function draw(){ 
    ctx.drawImage(car.src, car.x, car.y); 
} 

Full fiddle here

謝謝！

Answer 1

代碼有幾個問題。

• 你沒有onload處理
• 您正在使用的圖像元素x和y性能 - 這是隻讀屬性
• 您正在使用的圖像元素，而不是一個自定義對象添加屬性
• 你打算叫draw代替animate
• 您還沒有清空畫布的每個畫
背景
• 您正在試圖利用其網址
• 聚填充應該是循環
• 的reqAnimFrame聚不承認非前綴​​外繪製的圖像。
• 和車去副作用的方法.. :-)

這裏是調整代碼和modified fiddle：

var reqAnimFrame = 
    window.requestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    window.oRequestAnimationFrame; 

var c = document.getElementById('canvas'); 
var ctx = c.getContext('2d'); 

c.height = window.innerHeight; 
c.width = window.innerWidth; 

var car = new Image(); 

/// when image is loaded, call this: 
car.onload = animate; 

/// x and y cannot be used, in "worse" case use this but ideally 
/// use a custom object to set x and y, store image in etc. 
car._x = 40; 
car._y = 60; 
car.src = "http://i.imgur.com/8jV4DEn.png"; 

var speed = 5; 

function animate(){ 

    car._y += speed; 

    draw(); 
    reqAnimFrame(animate); 
} 

function draw(){ 

    /// clear background 
    ctx.clearRect(0, 0, c.width, c.height); 

    /// cannot draw a string, draw the image: 
    ctx.drawImage(car, car._x, car._y); 
} 

/// don't start animate() here 
//animate();