更改画布背景

Question

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

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

我曾考虑过在整个画布上放大视角，但会覆盖所有已制作的图画。有任何想法吗？

Answer 1

在上面绘制

提取您的剩余图形如果你想添加您已经在画布上绘制了某些东西之后的背景，您可以添加具有相同尺寸的另一个画布并使用“display：none” - n，在发送图像之前，只需用CSS中的主要画布元素的背景色填充临时画布，然后将主画布拖到临时画布上。 最后，从临时画布向服务器发送组合，而不是具有透明背景的主画布的位图。

Answer 2

您没有显示任何代码，但是：您需要使用它的上下文绘制背景。使用CSS设置背景将在您提取图像时发现不包括它。

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

执行以下操作：

• 在初始化时，例如使用fillRect()
• 绘制背景使用toDataURL()