使用 Canvas 渲染上下文在 Web 上繪圖

您將如何在瀏覽器中建立 2D 繪圖應用程式？

html canvas 元素與 CanvasRenderingContext2D 介面結合，提供了一種在 Web 上繪製圖形的簡單方法。

注意： 在 Web 上繪圖的兩個替代選項是 WebGL 和 SVG。

CanvasRenderingContext2D

CanvasRenderingContext2D 介面為畫布元素的繪圖表面提供 2D 渲染上下文。它用於在畫布上繪製形狀、文字、圖像和其他物件。

這是光柵圖形，而不是 SVG 使用的向量圖形。光柵圖形由像素組成，而向量圖形則由路徑組成。光柵不
放大和縮小以及向量圖形。

使用案例

2D 畫布的一些常見用例包括：

• 照片編輯
• 繪畫/素描應用程式
• 簡單的遊戲

範例應用程式

在這個範例中，我們有幾個簡單的要求：

• 使用者可以在畫布上繪製線條
• 使用者可以設定背景
• 使用者可以從 EyeDropper 顏色選擇器和預設提供的調色板中選擇背景和線條顏色
• 使用者可以清除畫布
• 使用者可以撤銷/重做
• 使用者可以將繪圖下載為圖片
• 使用者可以使用熱鍵執行上述所有操作

Codesandbox.io

特色創意

您可以透過添加更多功能來進一步擴展此範例，例如：

筆自訂：允許使用者自訂筆的大小和筆觸的表單。

將影像狀態儲存到持久性儲存：影像狀態目前儲存在組件狀態中。您可以將影像狀態儲存到持久性存儲，例如本機儲存或資料庫。

新增文字：新增一個新的操作按鈕以允許使用者為畫布新增文字。 CanvasRenderingContext2D 介面提供
用於在畫布上繪製文字的 strokeText 和 fillText 方法。

新增圖像：允許使用者將圖像上傳到畫布。 CanvasRenderingContext2D 介面提供了一個drawImage 方法，用於在畫布上繪製圖像。這確實可以為應用程式帶來許多可能性。

新增圖層系統：允許使用者為畫布添加多個圖層。這將允許使用者在不同的圖層上繪圖並切換每個圖層的可見性。這將是一個更複雜的功能，但可以為用戶提供很大的靈活性。

填滿區域：新增一個新的操作按鈕以允許使用者用顏色填滿區域。 CanvasRenderingContext2D 介面提供了填滿方法，用於使用目前填滿樣式填滿區域。

最後的想法

值得再次提及的是，WebGL 和 SVG 是另外兩個值得研究的有趣的網頁繪圖選項。

CanvasRenderingContext2D 介面的 MDN 文件是了解有關 2D 畫布的更多資訊的絕佳資源。

拿這個範例來運行吧！在網路上創建有趣的互動式繪圖應用程式有很多可能性。

以上是使用 Canvas 渲染上下文在 Web 上繪圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！