Move rotating image along Canvas
- by fatnic
Hi. I've managed to make an image rotate on my canvas. And I've managed to make an image move along the canvas. My problem now is making it do both. I have got it working but I seems a bit like a hack. I've posted a demo online Here's the code.
var cnv = document.getElementById("drawing");
var c = cnv.getContext('2d');
var image = new Image();
image.src = 'images/spaceship.png';
var imgWidth = image.width;
var imgHeight = image.height;
var i=0;
function animate() {
c.clearRect(0,0,640,480);
c.save();
c.translate(-(imgWidth/2)+i,200);
c.rotate(i * Math.PI/180);
c.translate(-(imgWidth/2),-(imgHeight/2));
c.drawImage(image, 0, 0);
c.restore();
(i==640+imgWidth) ? i=0: i+=2;
};
setInterval(animate, 1);
I think my problem is I'm not understanding the translate() method properly. Is this the correct way to do it or am I competely way off?
