开发者

How to move only one image on canvas

开发者 https://www.devze.com 2023-04-12 16:03 出处:网络
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 :

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);
        }
    }
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号