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

王林转载: 2023-09-16 08:53:02 1014浏览

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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：在 JavaScript 中生成前 n 个看和说数字的序列下一条：如何使用 FabricJS 使多边形对象对倾斜事件做出反应？