HTML 畫布 - 環境設定

畫布最佳應用之一是它可以在任何支援 HTML5 和 JavaScript 的瀏覽器上執行。這使其非常通用且易於使用。目前所有可用的瀏覽器，如 Chrome、Opera、Mozilla、Edge 和 Safari，都支援 JavaScript。因此，任何可用於顯示 HTML 和 JavaScript 程式碼的編輯器都可以用於處理 HTML5 Canvas 元素。此外，必須允許您的瀏覽器訪問並執行 JavaScript 程式碼。下表包含支援 HTML5 畫布的瀏覽器名稱和版本號。

瀏覽器名稱	畫布支援
谷歌 Chrome	4.0 及以上
微軟 Edge	9.0 及以上
Mozilla Firefox	2.0 及以上
Opera	3.1 及以上
蘋果 Safari	9.0 及以上

使用 Canvas 元素實現二維動態圖形設計和視覺化效果所需的基本要求如下所示

文字編輯器

用於編寫程式碼。這可以是任何文字編輯器，例如 Visual Studio Code (VS 程式碼)、Notepad++、Sublime Text 或 Atom。我們不能使用文件編輯器來建立 Canvas 元素，因為我們不能只在混合編輯器中使用 JavaScript。我推薦 Sublime Text 或 Visual Studio Code，因為它們非常易於編寫指令碼。Visual Studio Code 帶有內建的本地伺服器，可以在本地伺服器上使用隨機埠執行 Web 程式。Sublime Text 配備易於使用的工具，使其更簡單易用。還有一些線上編譯器，例如 codepen.io，可以更輕鬆地進行操作，而無需下載任何 IDE。

網路瀏覽器

在網頁中測試程式碼並瞭解其結構。目前，使用最廣泛的瀏覽器是 Mozilla Firefox、谷歌 Chrome、微軟 Edge、Opera 瀏覽器和蘋果 Safari。您還應該測試您的網站在移動裝置上的效能以及目標受眾可能仍在使用的任何舊瀏覽器（例如 IE 8-10）上的效能。這有助於改進和了解 Canvas 元素如何與網頁互動。還有一些不同的網路瀏覽器，例如 Lynx，這是一個基於文字的終端網路瀏覽器，用於檢視視障使用者如何體驗您的網站。您還可以使用 Explorer-canvas 透過 Internet Explorer 獲得畫布支援。要使其工作，我們必須在程式碼中包含以下 JavaScript 程式碼段

<!--[if IE]><script src = "canvas.js"></script><![endif]-->

驗證

執行以下示例以檢查編輯器是否正常工作

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check editor</title>
</head>
<body>
   <p>Hello viewers</p>
   <canvas id="canvas" width="300" height="150" style="border: 2px solid black;">
      This text is displayed if your browser does not support HTML5 Canvas or if JavaScript is disabled.
   </canvas>
</body>
</html>

如果編輯器建立的網頁包含字串“Hello viewers”和一個小空心矩形，則編輯器安裝正確。如果網頁沒有呈現任何內容，則安裝不正確。僅當 Web 瀏覽器不支援 Canvas 元素時，才會顯示 Canvas 標籤內的文字。您需要更新瀏覽器或安裝支援 Canvas 元素的瀏覽器。

列印頁面