2014-02-05 132 views
0

我有HTML5畫布繪圖應用程序,我需要在用戶單擊按鈕時更改它的背景顏色。更改畫布背景

畫布上的背景色正在用戶端工作,但用戶可以將圖像保存到服務器,並使用canvas.toDataURL('image/png')導出畫布數據。問題是,畫布的背景顏色不包含在內,它只發送用戶繪製的數據。

我曾考慮過在整個畫布上放大視角,但會覆蓋所有已製作的圖畫。有任何想法嗎?

回答

0

在上面繪製

  • 提取您的剩餘圖形如果你想添加您已經在畫布上繪製了某些東西之後的背景,您可以添加具有相同尺寸的另一個畫布並使用「display:none」 - n,在發送圖像之前,只需用CSS中的主要畫布元素的背景色填充臨時畫布,然後將主畫布拖到臨時畫布上。 最後,從臨時畫布向服務器發送組合,而不是具有透明背景的主畫布的位圖。

  • 1

    您沒有顯示任何代碼,但是:您需要使用它的上下文繪製背景。使用CSS設置背景將在您提取圖像時發現不包括它。

    帆布簡單地把兩部分:帆布元素本身和它的位圖。使用CSS會影響元素,但不影響位圖。因此,您需要通常通過上下文更新位圖或使用像素緩衝區來使其成爲位圖的一部分。

    執行以下操作:

    • 在初始化時,例如使用fillRect()
    • 繪製背景使用toDataURL()