加载图像，然后使用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();