Question

我在html5中在画布上绘制了大约10张图像。然后，我想仅移动第一张图片，另一张图片应保留在原位。这是代码：

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

据我所知，我使用该代码移动整个画布......但是如何仅移动一个图像而不是整个画布...我想使用两个画布......但看起来对我来说是一个糟糕的解决方案！ ..

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

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

如何在画布上只移动一个图像

1 个答案: