清晰的html5问题

Question

我有这个代码

function clear(){
    context2D.clearRect(0, 0, canvas.width, canvas.height);
}


function desenhaBonecoDir(){

    clear();
    context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//problem here
    context2D.drawImage(bonecoRight, x, y);
    x += -10 * xDirection;
}

如果我删除评论“此处问题”的行，则脚本运行良好，但如果我用设置的变换改变视角，我不知道为什么，图像被复制但未删除，结果是当我按下按键时重复图像

有帮助吗？

谢谢

Answer 1

该问题是由于更改视角引起的，但在清除视角时却没有将其改回来，因此它清除了“视角”而不是整个画布，请尝试下面的操作。它的作用是保存当前的视角，然后将其更改为您需要的任何内容，绘制等，然后恢复恢复以前的视角，以便您恢复正常的坐标。

context2D.save();
context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);
context2D.drawImage(bonecoRight, x, y);
context2D.restore();

稍微修改一下你的代码以显示它的工作原理。
http://jsfiddle.net/89yjG/1/

评论保存并恢复，您会注意到的文物。