如何重新绘制画布的特定部分？答案

【问题标题】：How to re-draw a particular portion of canvas?如何重新绘制画布的特定部分？
【发布时间】：2013-05-30 23:13:42
【问题描述】：

我正在使用<canvas> 和JavaScript 创建一个HTML 5 游戏。

在我的画布中，我正在加载高分辨率图像。每分钟都会有一些对象出现在这个画布上。如果用户点击它。它将从屏幕上移除。

我的问题：

我正在使用clearRect() 函数来清除画布。并再次重新绘制所有图像。是否有必要每次我重新绘制整个内容？是否有任何选项可以重新绘制该特定区域？

当我使用clearRect() 清除该对象的确切区域时。背景图像也被删除。有没有办法保存背景图像的特定部分并用这个保存的图像绘制该部分？（因为我的对象在画布上移动，我需要动态检索图像数据）

我是 WebTechnology 和 HTML 5 的新手。所以请帮助我。提前致谢

【问题讨论】：

为什么不建立画布层，然后只清除指定的层，以便不需要清除的背景放在一层上，然后将绘制的部分放在另一层上，然后使用该层上的 clearRect
@Pete：感谢您的建议

标签： javascript html canvas html5-canvas

【解决方案1】：

将画布想象成一幅画，一旦应用了内容“层”，就无法移除它。您可以使用clearRect(x,y,height,width) 指定要清除的画布部分，但您始终需要重新绘制已删除内容的背景。 drawImage() 函数接受参数以在特定位置绘制图像的特定部分，但可能更符合您希望使用的是 imageData。

我建议你在Mozilla Dev Network: Canvas Mozilla Dev Network: Canvas上做一些阅读

【讨论】：

为了保存背景图片或多张图片，您还可以使用多个画布元素。

【解决方案2】：

有一些画布层库增加了对层的支持：

【讨论】：