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

完整的小提琴在这里

谢谢！

Answer 1

代码有几个问题。

• 你没有onload处理程序
• 您在图像元素上使用x和y属性 - 这些是只读属性
• 您正在使用图像元素而不是自定义对象来添加属性
• 你打算打电话draw而不是animate
• 您没有为每次绘制清除画布的背景
• 您正在尝试使用其 url 绘制图像
• 填充物应该在循环之外
• reqAnimFramepoly 不承认 non- requestAnimationFrameprefixed 。
• 汽车侧向行驶.. :-)

这是调整后的代码和修改后的小提琴：

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();