更改畫布背景

Question

我有HTML5畫布繪圖應用程序，當用戶單擊按鈕時，我需要更改其背景顏色。

畫布上的背景色在用戶端起作用，但是用戶可以將圖像保存到服務器，並且我正在使用canvas.toDataURL（'image / png'）導出畫布數據。 問題是，不包括畫布的背景色，它僅發送用戶繪制的數據。

我曾考慮過要在整個畫布上放置大的矩形，但這會覆蓋所有已經制作的圖紙。 有任何想法嗎？

Answer 1

您沒有顯示任何代碼，但是：您需要使用上下文來繪制背景。 正如您已經發現的那樣，使用CSS設置背景將不會在提取圖像時包含背景。

畫布僅包含兩個部分：畫布元素本身及其位圖 。 使用CSS會影響元素，但不會影響位圖。 因此，通常需要通過位圖的上下文或使用像素緩沖區使位圖成為位圖的一部分來更新位圖。

請執行下列操作：

• 在初始化時，使用例如fillRect()繪制背景
• 在頂部繪制剩余的圖形
• 使用toDataURL()提取

Answer 2

如果要在畫布上繪制某些東西后添加背景，則可以添加另一個具有相同大小和“ display：none”的畫布-然后，在發送圖像之前，只需用主畫布填充臨時畫布CSS元素的背景顏色，然后將主畫布繪制到臨時畫布上。 最后，將臨時畫布（而不是具有透明背景的主畫布的位圖）發送到服務器。