更改画布背景答案

【问题标题】：Changing canvas background更改画布背景
【发布时间】：2014-03-01 12:41:36
【问题描述】：

我有 HTML5 画布绘图应用程序，当用户单击按钮时，我需要更改它的背景颜色。

画布上的背景色在用户端工作，但用户可以将图像保存到服务器，我正在使用 canvas.toDataURL('image/png') 导出画布数据。问题是，画布的背景颜色不包括在内，它只发送用户绘制的数据。

我曾想过在整个画布上放置大的重新调整，但这会覆盖所有已经制作的图纸。有什么想法吗？

【问题讨论】：

【解决方案1】：

如果你想在画布上画完之后添加背景，你可以添加另一个相同大小的画布并使用“display:none” - 然后，在发送图像之前，只需在临时画布上填充您的主画布元素的背景颜色来自 CSS，然后将主画布绘制到临时画布上。最后，从临时画布而不是具有透明背景的主画布的位图发送到服务器。

【讨论】：

【解决方案2】：

您没有显示任何代码，但是：您需要使用它的上下文来绘制背景。正如您已经发现的那样，使用 CSS 设置背景不会在提取图像时包含它。

Canvas 只是简单地放在了两部分：canvas element 本身和它的bitmap。使用 CSS 会影响元素，但不会影响位图。因此，您通常需要通过其上下文或使用像素缓冲区来更新位图，使其成为位图的一部分。

执行以下操作：

【讨论】：