資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究主要瀏覽器中Canvas Javascript API的作用
Canvas JavaScript API 是一個強大的工具，用於在 Web 上建立和操作圖形。它允許您使用 JavaScript 程式碼繪製二維圖形，並受大多數現代 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 用於 canvas API。除 Internet Explorer 外的其他主要瀏覽器都支援 canvas API。
Canvas 在 Windows、Linux、Mac、Android 和 iOS 上以及所有主要瀏覽器中都能工作。作業系統應執行所有安全檢查和升級，以確保 canvas API 的正常執行。此處列出了具有版本的此類瀏覽器。
Chrome
Firefox，但不支援擴充套件版本
Edge
Respondus Lockdown Browser 僅支援最新的系統要求。
Safari 僅限於 Macintosh
至少具有 1GB RAM 的系統適用於 canvas API。原生移動瀏覽器對平板裝置的支援較少。預設的 Android 瀏覽器會隨移動裝置而變化。
移動瀏覽器
iOS
Safari 是預設瀏覽器，其 Canvas 支援有限。
Chrome
Photon Flash Player 支援 Flash
Android
Chrome 是預設瀏覽器，其 Canvas 支援有限
Firefox
螢幕閱讀器
最新版 Safari 中的 Macintosh VoiceOver
最新版 Firefox 中的個人電腦 JAWS
最新版 Firefox 中的個人電腦 NVDA
Chrome 不支援 canvas 中的螢幕閱讀器。
檢測 Canvas API 瀏覽器支援的程式碼
Canvas 是一個 HTML 5 元素。canvas 中的 getContext() 方法返回繪圖上下文。如果返回 null，則表示 canvas 元素不受支援。
使用者可以按照以下語法使用下面的程式碼來檢查瀏覽器是否支援 canvas 元素。
語法
if(document.createElement('canvas').getContext){
/*Canvas object available*/
}
語法中的 if 條件建立一個 canvas 元素並嘗試獲取上下文。如果返回上下文，則瀏覽器支援 canvas。
示例
在此程式中，使用者可以透過單擊按鈕來檢查瀏覽器對 canvas 的支援。單擊按鈕時，事件會呼叫一個函式，該函式嘗試使用上述語法獲取 canvas 上下文。程式中有一個標誌變數用於區分瀏覽器支援並向用戶顯示訊息。
<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>
示例
以下是如何使用 canvas API 在 canvas 上繪製簡單圓圈的示例：
<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 方法用於獲取 canvas 的繪圖上下文，arc 方法用於繪製一箇中心點為 (95, 50) 、半徑為 40 畫素的圓。然後使用 stroke 方法在 canvas 上繪製圓。
本教程幫助我們確定 canvas API 是否是所有主要瀏覽器的內建原生部分。並非所有主要瀏覽器都內建了 canvas API。我們現在知道一個程式碼可以檢測瀏覽器對 canvas API 的支援。使用者可以使用此程式碼片段在編碼 canvas 之前進行瀏覽器支援檢查，從而避免錯誤。
瀏覽量 223 次
