如何在画布上仅移动一张图像答案

【问题标题】：How to move only one image on canvas如何在画布上仅移动一张图像
【发布时间】：2011-10-15 09:03:08
【问题描述】：

我在 html5 的画布上绘制了大约 10 张图像。然后，我只想移动第一个图像，另一个应该保留在原地。这是代码：

ctx.clearRect(0, 0, 500, 375);
ctx.translate(20, 0);

我知道我使用该代码移动了整个画布......但是如何只移动一个图像而不是整个画布......我考虑使用两个画布......但看起来对我来说是一个糟糕的解决方案！。 ..

我会使用保存和恢复，但是当我尝试时，它会重复图像......不好！我有点迷路了，阅读了很多教程并阅读：Canvas - move image-problem 但没有用。帮助

【问题讨论】：

编辑你的问题是错误的方式来表明你已经找到了答案；要么删除您的问题，要么将其作为答案并接受。
基于该答案，我设法使其工作stackoverflow.com/questions/7496674/…
把它作为一个答案。那你就可以接受了。
正确答案，主要是回答我自己的问题stackoverflow.com/questions/7496674/…

标签： html canvas

【解决方案1】：

这是我的最终工作代码

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

【讨论】：