html - 您如何将 html5 画布划分为多个区域以仅隐藏/显示部分

Question

我有一个画布，我在其中手动创建矩形以构建完整的单个图表。做一些着色和文字放置等......

如何轻松告诉某个区域隐藏并再次显示？

是否有面向对象的方法以某种方式将画布划分为区域？

Answer 1

我认为没有一种解决方案可以按您想要的方式工作。画布元素不跟踪区域是像你从 dom 中知道的元素。您可以做一些事情：

• 考虑使用 svg。SVG 的工作方式更像 html，可以通过 javascript/dom 和 css 进行操作。
• 使用要显示的元素重新绘制整个画布。您不必手动执行此操作。一些框架，如 paper.js 或 kinetic.js 会有所帮助。这些框架还具有类似层的功能。
• canvas 元素有 api 函数 getImageData 和 putImageData。使用这些函数，您可以将画布区域保存到 javascript 数组中，并使用画布绘图函数将该区域清空。需要时，您可以使用 putImageData 函数重新绘制该区域。