我对 Canvas 完全陌生。我正在尝试将图像绘制到 Canvas 上,然后对其进行动画处理。现在我无法在屏幕上绘制图像。图像根本不显示。
部分代码:
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);
}
谢谢!
最佳答案
代码有几个问题。
- 您没有
onload
处理程序 - 您正在图像元素上使用
x
和y
属性 - 这些是只读属性 - 您正在使用图像元素而不是自定义对象来添加属性
- 您打算调用
draw
而不是animate
- 您没有为每次绘制清除 Canvas 的背景
- 您正在尝试使用其 url 绘制图像
- poly-fill 应该在循环之外
reqAnimFrame
多边形不接受无前缀的requestAnimationFrame
。- 然后汽车向侧面行驶.. :-)
这里是调整后的代码和一个 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();
关于javascript - 加载图像,然后使用 canvas/javascript 对其进行动画处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19775815/