javascript - HTML5 Canvas - 并排有 2 个 Canvas 对象

Question

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

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

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

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

Answer 1

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

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

以下是不使用画布创建 UI 组件的一些充分理由。