画布 - 移动图像问题

Question

我的脚本使用画布时出现问题。

我想移动我的图像，但是使用drawImage，图像移动但结果是这样的：

所以，我的代码是

function desenhaBonecoDir(){
    var ctxt = document.getElementById('camadaBoneco').getContext("2d");
    bonecoX = bonecoX -10;
    ctxt.drawImage(bonecoLeft, bonecoX, bonecoY);

}

我认为唯一的方法是使用SVG（保留模式）。它是正确的？

任何教程？或者例子？ - “如何使用SVG移动图像” 我怎么解决这个问题？

由于

Answer 1

您需要擦除全部或部分画布并重绘。是的，使用SVG或HTML + CSS更容易，但不是必需的。

以下是在背景上移动精灵的示例，可以选择删除并重绘全部或部分BG：http://phrogz.net/tmp/image_move_sprites_canvas.html

请注意，仅使用CSS为faster than canvas。

Answer 2

此代码解决了我的问题

context2D.clearRect(0, 0, canvas.width, canvas.height); 

这里的好例子：http://brighthub.com/internet/web-development/articles/38744.aspx?p=3