你如何将html5画布分成多个区域来隐藏/只显示部分

Question

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

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

是否可以采用面向对象的方法在某些区域划分画布？

Answer 1

我认为没有一种解决方案可以按照您想要的方式运行。 Canvas元素不跟踪区域是你从dom知道它的元素。你可以做一些事情：

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