画布 - 移动图像问题答案

【问题标题】：Canvas - move image-problem画布 - 移动图像问题
【发布时间】：2011-07-08 05:15:55
【问题描述】：

我的脚本使用画布有问题。

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

所以，我的代码是

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

}

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

有教程吗？或例子？ - “如何使用 SVG 移动图像” 我该如何解决？

谢谢

【问题讨论】：

标签： html canvas svg

【解决方案1】：

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

这是一个在背景上移动精灵的示例，可以选择擦除和重绘全部或部分背景：http://phrogz.net/tmp/image_move_sprites_canvas.html

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

【讨论】：

【解决方案2】：

这段代码解决了我的问题

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

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

【讨论】：