HTML5 Canvas - 并排有 2 个 Canvas 对象

Question

我知道您可以将画布层层叠叠，就像您在 Photoshop 中制作图像一样，但是您可以将画布对象上下或并排放置吗？

我正在寻找一个图表，它允许您选择一个空间，并根据您选择的颜色来更改基于该选择的块。

这是我的想法： 画布 #1 - 绘制方格纸 画布 #2 - 画布 #1 的右侧 - 有 4 种颜色选择的选项卡。我会根据彩色图像计算出这些的 x-y 以获取颜色。帆布 1 块颜色将反映这种选择。

这是进行此实现的好方法吗？

Answer 1

是的，您可以将画布放在上方、下方和并排放置。画布是一个 HTML 元素，可以像使用 CSS 的任何其他元素一样定位。

我可能会尽量避免为您的颜色选择选项卡使用画布，除非出于您未提及的某些原因绝对必要。如果您改用标准 DOM 元素，您将能够直接绑定到 click 事件，而不必计算鼠标相对于画布中图形的位置。

这里有一些good reasons not to use canvas to create UI components。