Canvas Javascript API 在主流浏览器中的作用
Canvas JavaScript API 是一种在 Web 上创建和操作图形的强大工具。它允许您使用 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 用于 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 中的个人计算机 NNVDA
Chrome 不支持屏幕阅读器画布。
检测 Canvas API 浏览器支持的代码
Canvas 是 HTML 5 元素。canvas 中的 getContext() 方法返回绘图上下文。如果返回 null，则表示不支持该画布元素。
用户可以按照以下语法使用以下代码检查浏览器是否支持画布元素。
语法
if(document.createElement('canvas').getContext){
/*Canvas 对象可用*/
}
语法中的 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方法用于获取canvas的绘制上下文，arc方法用于绘制一个圆心为(95, 50)，半径为40像素的圆。然后使用stroke方法在canvas上绘制圆。
本教程帮助我们确定canvas API是否是所有主流浏览器的内置原生部分。并非所有主流浏览器都内置了canvas API。我们现在知道了一个代码来检测浏览器对canvas API的支持。用户可以使用此代码片段，在编写canvas代码时，通过先前的浏览器支持检查来避免错误。
