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 在主要瀏覽器中的作用的詳細內容，更多請關注www.92cms.cn其它相關文章！
