drawImage下的繪圖筆畫

Question

我正嘗試使用HTML5和Javascript創建填色書應用程序。我試圖將動態PNG圖像加載到畫布上並在底下繪製筆畫。但它似乎並沒有工作...

我也嘗試使用分層的畫布，但它似乎並沒有工作。有沒有辦法在圖像下劃分圖層？

Answer 1

如果PNG圖像有透明區域（其中用戶敲擊都應該繪製），你可以嘗試：

1. 先畫出整個圖像在畫布上。
2. 過程用戶正常敲擊（檢測mousedown，mousemove等），但跟蹤「修改區域」（即第一次和最後一次單擊之間的矩形）
3. 當每個筆畫完成時，再次繪製canva的區域剛剛改變了（上一個矩形），所以用戶的筆畫將保持可見，拋出png圖像的透明區域。

這樣，用戶可以在用戶的​​筆觸（填充顏色）上繪製但保留原始png圖像（例如鉛筆圖）。

編輯： 一個更好的主意可能是使用兩個畫布/圖層：第一個（上圖）將具有原始png圖像（透明區域）。當用戶在那裏點擊時，您可以在第二個畫布中繪製筆畫（下圖），因此您的PNG將會一直存在，而不需要在每個筆畫上重新繪製額外的工作。此外，它可以很容易地實現「擦除」工具。

當然，您需要在保存到磁盤之前合併兩個畫布，下載打印。