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

canvas JavaScript API是一个强大的工具，用于在网络上创建和操纵图形。它允许你使用JavaScript代码绘制二维图形，并被大多数现代网络浏览器所支持。游戏操作、动画、视频处理等都有Canvas API的身影。

画布API是以画布元素的形式实现的，它是一个可以放在HTML文档中的HTML元素。画布元素被用作绘画表面，并可以使用CSS进行风格化和定位。

要在画布上绘制图形，你可以使用画布API的绘图方法，如arc、lineTo和fillRect。这些方法允许你在画布上绘制形状、线条和其他图形。

浏览器支持Canvas API

Google Chrome和Mozilla Firefox是主要支持canvas API的浏览器。千万不要使用Safari或Microsoft Edge的canvas API。除Internet Explorer外，其他主要浏览器都支持canvas API。

画布可以在windows、Linux、Mac、Android和iOS中使用，并可使用所有主要浏览器。操作系统应该做所有的安全检查和升级，以确保canvas API的正常工作。此类浏览器的版本列表在此。

Chrome
火狐，但不支持扩展版本
Edge
Respondus Lockdown Browser只支持最新的系统要求。
仅限Macintosh上的Safari浏览器

至少有1GB内存的系统适合使用canvas API。本地移动浏览器对平板设备的支持较少。默认的安卓浏览器随着移动设备的变化而变化。

移动浏览器

iOS

Safari是默认浏览器，对Canvas的支持有限。

Chrome

Photon Flash Player支持Flash

Android

Chrome是默认浏览器，对Canvas的支持有限。
Firefox

读屏器

最新版本的Safari中的Macintosh VoiceOver
个人电脑的JAWS在最近版本的Firefox中的应用
个人电脑 NNVDA在最新版本的Firefox中的应用

Chrome不支持画布中的屏幕阅读器。

检测Canvas API浏览器支持的代码

画布是一个HTML 5元素。canvas中的getContext()方法返回绘图上下文。如果它返回null，这意味着canvas元素没有支持。

用户可以按照下面的语法，用下面的代码检查浏览器是否支持canvas元素。

语法

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

语法中的if条件创建了一个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方法被用来获取画布的绘图上下文，arc方法被用来画一个中心点为（95，50）、半径为40像素的圆。然后用stroke方法在画布上画出这个圆。

本教程帮助我们找到画布API是否是所有主要浏览器的内置原生部分。并非所有的主要浏览器都有内置的canvas API。我们现在知道了一个检测浏览器是否支持canvas API的代码。用户可以在编码画布时，使用这个代码段事先检查浏览器的支持情况，以避免错误。