首頁 >web前端 >js教程 >Canvas Javascript API 在主要瀏覽器中的作用

Canvas Javascript API 在主要瀏覽器中的作用

王林轉載: 2023-09-16 08:53:021437瀏覽

Canvas Javascript API 在主要浏览器中的作用

canvas JavaScript API 是用於在網路上建立和操作圖形的強大工具。它允許您使用 JavaScript 程式碼繪製 2D 圖形，並且大多數現代 Web 瀏覽器都支援它。遊戲操作、動畫、影片處理等等都來自 Canvas API。

canvas API以canvas元素的形式實現，canvas元素是一個可以放置在HTML文件中的HTML元素。 canvas 元素用作繪圖表面，可以使用 CSS 進行樣式設定和定位。

要在畫布上繪製圖形，可以使用canvas API的繪圖方法，例如arc、lineTo和fillRect。這些方法可讓您在畫布上繪製形狀、線條和其他圖形。

瀏覽器對 Canvas API 的支援

Google Chrome 和 Mozilla Firefox 是主要支援 canvas API 的瀏覽器。切勿將 Safari 或 Microsoft Edge 用於畫布 API。除 Internet Explorer 之外的其他主要瀏覽器都支援 canvas API。

Canvas 適用於 Windows、Linux、Mac、Android 和 iOS 以及所有主要瀏覽器。作業系統應該進行所有安全檢查和升級，以確保canvas API正常運作。這裡有此類瀏覽器及其版本的清單。

Chrome
#Firefox，但不支援擴充版本
邊緣
Respondus Lockdown 瀏覽器僅支援最新的系統需求。
Safari 僅適用於 Macintosh

至少具有 1GB RAM 的系統適合使用 canvas API。本機行動瀏覽器對平板電腦設備的支援較少。預設 Android 瀏覽器會隨行動裝置而變化。

行動瀏覽器

iOS

Safari 是預設瀏覽器，對 Canvas 支援有限。

Chrome

Photon Flash Player 支援 Flash

安卓

Chrome 是預設瀏覽器，對 Canvas 支援有限
#火狐瀏覽器

#螢幕閱讀器

最新版本 Safari 中的 Macintosh VoiceOver
#最新版本的 Firefox 中的個人電腦 JAWS
#個人電腦 NNVDA（最新版本的 Firefox）

#Chrome 不支援畫布中的螢幕閱讀器。

偵測 Canvas API 瀏覽器支援的程式碼

Canvas 是一個 HTML 5 元素。 canvas 中的 getContext() 方法傳回繪圖上下文。如果傳回null，表示canvas元素不支援。

使用者可以依照下面的語法，用下面的程式碼檢查瀏覽器是否支援canvas元素。

文法

if(document.createElement('canvas').getContext){
   /*Canvas object available*/
}

語法中的 if 條件建立一個畫布元素並嘗試取得上下文。如果上下文返回，則瀏覽器支援畫布。

範例

在此程式中，使用者可以透過點擊按鈕檢查瀏覽器對畫布的支援。當您按一下該按鈕時，該事件會呼叫函數，該函數會嘗試使用上述語法來取得畫布上下文。程式中存在一個標誌變量，用於區分瀏覽器支援並向使用者顯示訊息。

<html>
<body>
   <h2> Check if your browser support canvas API in JavScript </i>
   </h2>
   <button class="button" onclick="browserSupport()">
      Check
   </button>
   <br> <br>
   <b class="outputEl"> </b>
   <script>
      function browserSupport() {
         if (document.createElement('canvas').getContext)
            hasSupport = true;
         else
            hasSupport = false;
         document.querySelector('.outputEl').innerHTML = hasSupport ? "Browser supports canvas" : "Browser does not support canvas";
      }
   </script>
</body>
</html>

範例

以下是如何使用畫布 API 在畫布上繪製簡單圓圈的範例 -

<html>
<body>
   <p> Drawing a circle using Canvas JavaScript API </p>
   <canvas id="myCanvas" width="200" height="100"></canvas>
   <script>
      var canvas = document.getElementById("myCanvas");
      var context = canvas.getContext("2d");
      context.beginPath();
      context.arc(95, 50, 40, 0, 2 * Math.PI);
      context.stroke();
   </script>
</body>
<html>

在此範例中，建立的 canvas 元素的 id 為“myCanvas”，寬度和高度分別為 200 和 100 像素。 getContext方法用於取得畫布的繪圖上下文，arc方法用於繪製一個中心點為(95, 50)、半徑為40像素的圓。然後使用描邊方法在畫布上繪製圓圈。

本教學幫助我們了解畫布 API 是否是所有主要瀏覽器的內建本機部分。並非所有主流瀏覽器都有內建的 canvas API。我們現在知道了一段程式碼來偵測瀏覽器對 canvas API 的支援。使用者可以在使用先前的瀏覽器對畫布進行編碼時避免錯誤，支援使用此程式碼片段進行檢查。

以上是Canvas Javascript API 在主要瀏覽器中的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript firefox css chrome safari html edge NULL if 事件 canvas windows android ios microsoft linux

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：在 JavaScript 中產生前 n 個看和說數字的序列下一篇：在 JavaScript 中產生前 n 個看和說數字的序列

看更多