How to move only one image on canvas
I have about 10 images I draw on canvas in html5. Then, I would like to move the first image only, the other one should remain in place. here is the code :
ctx.clearRect(0, 0, 500, 375);
ctx.translate(20, 0);
I understand that I move the whole canvas with that code... but how to move only one image not the whole canvas... I think about using two canvas... but look like a bad solution to me !...
i guest the save and restore will be used, but when i try, it repeat the images... not good !. i am kind of lost, and re开发者_如何学运维ad a lot of tutorial and read that : Canvas - move image-problem but not usefull. HELP
Here is my final working code
function drawOnCanvas() {
ctx.save();
ctx.clearRect(0, 0, 500, 375);
ctx.globalAlpha = 1;
ctx.translate(image_objects[0].width/2, image_objects[0].height/2);
ctx.scale(scale,scale);
ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2);
ctx.translate(image_objects[0].width/2, image_objects[0].height/2);
ctx.rotate(rotate);
ctx.translate(-image_objects[0].width/2, -image_objects[0].height/2);
ctx.translate(movex, movey);
ctx.drawImage(image_objects[0],0,0);
ctx.restore();
if (hide_images == false) {
for (var i = 1; i < image_objects.length; ++i) {
ctx.globalAlpha = opacity;
ctx.drawImage(image_objects[i], 0, 0);
}
}
}
精彩评论