HTML Canvas - 簡介

上一頁
下一頁

Canvas 是一個 HTML 元素，可以使用 JavaScript 動態生成 2D 形狀和點陣圖影像。HTML Canvas 是在網頁內繪製圖形資料（如圖表、圖表和地圖）的一個很好的替代方案。它是一個低階過程模型，以點陣圖的形式更新。

Canvas 元素只是圖形的基本矩形容器，通常使用 JavaScript 完成。Canvas 元素內的形狀或任何其他圖形實現可以使用 JavaScript 完成。HTML Canvas 元素是一個像 div、a 或 table 這樣的 HTML 標籤，區別在於其內容使用 JavaScript 渲染。

為什麼選擇 Canvas？

如今，有超過 12 億個網站彼此之間獨一無二，並且涉及各種功能。canvas 元素專門設計用於建立可唯一應用於開發網站 UI 並使其對使用者更具吸引力的視覺內容。它非常容易學習，只需要具備 HTML 和 JavaScript 的知識基礎。

Canvas 和 <img> 標籤？

乍一看，canvas 元素類似於 HTML5 影像 <img> 元素，除了沒有“src”和“alt”屬性。與影像元素不同，canvas 元素需要結束標籤。canvas 元素只有兩個屬性，即寬度和高度。要使用 Canvas 設計圖形，我們必須使用 JavaScript。

Canvas 的尺寸

預設情況下，canvas 沒有邊框也沒有內容。可以在元素中宣告寬度和高度，也可以使用 JavaScript 的 DOM 屬性手動調整。當代碼中沒有給出寬度和高度屬性時，它將設定為預設值，其中寬度為 300 畫素，高度為 150 畫素。

該元素也可以透過 CSS 使用 Style 標籤進行樣式設定，並且還可以提供諸如邊框顏色和粗細等引數。如果給定的 CSS 樣式或尺寸與初始 Canvas 不匹配，它將顯示為一個扭曲的矩形。即使可以使用 CSS 對 Canvas 元素進行樣式設定，但 Canvas 上的實際繪製仍然無效，並且可以使用指令碼語言進行修改

Canvas 元素和 Canvas 上下文

使用 canvas 時，瞭解 canvas 元素和 canvas 上下文之間的基本區別非常重要，因為人們經常會混淆這兩者。canvas 元素是嵌入在 HTML 頁面中的實際 DOM 節點。canvas 上下文是一個具有屬性和方法的物件，您可以使用它在 canvas 元素內渲染圖形。上下文可以是 2D 或 3D（透過使用 WebGL）。我們可以使用 getContext() 函式將一個上下文分配給 canvas 元素。在同一個 canvas 中多次更改上下文可能會導致相同的物件上下文。

Canvas 元素的結構

一個簡單的 <canvas> 元素使用屬性 id、width、height 和 style 來定義，以便觀察 canvas 的邊框。這裡要識別的主要內容是，如果不給 canvas 任何樣式，即使它形成了，也無法在網頁上觀察到它。下面顯示了一個簡單的 canvas 標籤。

<canvas id="canvas" width="555" height="555" style="border:2px solid black;">
   This browser neither have JavaScript enabled nor support HTML5 canvas tag.
</canvas>

使用 id 或 class 識別 canvas 元素，以便將來使用 JavaScript 在其中渲染圖形。在上面的示例中，構建了一個尺寸為 555×555 且邊框顏色為黑色的 canvas。當發生導致 canvas 未顯示的錯誤時，canvas 標籤之間插入的句子將顯示。頁面上顯示的文字使使用者識別 canvas 顯示時存在錯誤。canvas 輪廓如下所示。

s\\Structure of Canvas Element

HTML5 Canvas 與可縮放向量圖形 (SVG)

可縮放向量圖形 (SVG) 是一種基於 XML 的標記語言，由全球資訊網聯盟 (W3C) 於 1999 年開發，用於視覺化基於 2D 的向量圖形。它是早期在瀏覽器中繪製形狀和設計圖形的標準。

SVG 是一種基於文字的開放式 Web 標準，用於描述可以在任何尺寸下清晰渲染的影像，並且專門設計用於與其他 Web 標準（包括 CSS、DOM、JavaScript 和 SMIL）良好協作。

SVG 格式的向量影像可以透過更新其中的文字輕鬆本地化，而無需任何圖形編輯器即可做到這一點。HTML Canvas 元素的工作方式類似於 SVG，但存在以下一些差異。

HTML Canvas 可縮放向量圖形 (SVG)
Canvas 使用畫素的矩形網格表示 2D 影像。 SVG 使用從笛卡爾平面（例如點、線和曲線）設計的幾何形狀表示 2D 影像。
Canvas 物件以立即模式繪製，如果發生任何錯誤，canvas 就會變得不規則。 SVG 物件由 DOM 記住，並在屬性更改時渲染到點陣圖以供使用。
Canvas 的可擴充套件性較差，因為它是一個低階過程模型。 SVG 具有很高的可擴充套件性，我們可以以任何解析度列印高質量的圖形。
Canvas 只能使用指令碼進行修改。 SVG 可以使用 CSS 和指令碼進行修改。
Canvas 只有一個圖形元素。 SVG 具有多個元素，這些元素是頁面 DOM 樹的一部分。
Canvas 元素標籤由 <canvas> 定義。 SVG 元素由 <svg> 標籤定義。

canvas 元素有兩個大小。第一個是元素本身的大小，可以透過更改元素的 width 和 height 屬性來更改。

另一個大小是元素的繪圖表面。CSS 屬性只能更改元素的大小，但繪圖表面不受影響。

Canvas 元素可以分為兩個部分設計

  • 初始化 HTML5 Canvas 元素。

  • 在繪圖表面上設計圖形。

Canvas 座標

在繪製 Canvas 元素之前，我們必須瞭解 canvas 座標。canvas 包含一個在 HTML 程式碼中初始化的可繪製區域，該區域具有寬度和高度作為屬性。Canvas 元素是一個二維矩形區域。canvas 元素的左上角被視為原點 (0,0)，其中屬性為寬度和高度。canvas 元素的右下角為 (canvas 寬度，canvas 高度)，由使用者給出。Canvas 元素的尺寸由使用者使用 CSS 屬性給出。如果未給出，則預設設定為 (300,150)。

canvas coordinates

Canvas 元素的簡單示例

這是一個繪製 canvas 元素的基本程式碼片段。寬度和高度分別為 555px 和 555px。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Canvas Element</title>
</head>
<body>
   <canvas id="canvas" width="555" height="555" style="border:2px solid orange;">
   </canvas>
</body>
</html>

上面程式碼片段的輸出為

Canvas Element

上面的程式碼片段幫助我們瞭解如何使用提供的屬性實現 canvas。

Canvas 元素的應用

Canvas 擁有許多圖形功能，在網路上具有廣泛的應用。Canvas 的一些主要應用包括

  • HTML5 Canvas 可用於在網頁上繪製文字。

  • canvas 元素用於開發高效的圖形。

  • 我們可以使用 canvas 元素設計從閃爍的星星到複雜動畫的簡單動畫。

  • Canvas 元素可用於網站互動，因為它們可以響應 JavaScript 事件並響應使用者操作。

  • Canvas 通常用於在網站上構建 2D 遊戲。

歷史

為移動應用程式和網頁發明圖形介面的想法最早是在 2000 年代初提出的，許多組織已開始研究以解決此問題。Canvas 元素的歷史如下所示。

  • Canvas 是一個 HTML5 元素，最初由 Apple 於 2004 年引入，用於開發其產品。

  • Apple 主要將 canvas 用於 WebKit 元件，以改進 Safari 瀏覽器上的 UI 圖形和儀表板小部件。

  • 後來它由 Web 超文字應用程式技術工作組 (WHATWG) 標準化，該工作組負責開發 HTML 和當今可用的下一代 Web 技術。

  • 以前，Canvas 元素用於製作線上 2D 遊戲，因為它更有效，並且可用的圖形功能對使用者更具吸引力。

  • Canvas 是一個 HTML 元素，可以使用 JavaScript 動態生成 2D 形狀和點陣圖影像。以前，由於網站鼓勵廣告，JavaScript 給使用者帶來了很多問題，導致渲染問題。後來透過在瀏覽器中停用 JavaScript 來解決此問題，這導致 Canvas 無法使用。如果使用者想使用 Canvas，則必須手動啟用 JavaScript。

  • 如今可用的瀏覽器都啟用了 JavaScript，HTML Canvas 是在網頁內繪製圖形資料（如圖表、圖表和地圖）的一個很好的替代方案，這使得使用 Canvas 元素變得更容易。

  • HTML Canvas 是在網頁內繪製圖形資料（如圖表、圖表和地圖）的一個很好的替代方案。它如今已被廣泛使用。

列印頁面

上一頁
下一頁
廣告