Canvas教程002—canvas上下文对象与浏览器支持

2.1 上下文对象

在 HTML5 里，<canvas> 元素的上下文对象和浏览器支持情况密切相关。下面为你详细介绍：

上下文对象概述

<canvas> 元素本身没有绘图能力，要绘图得先获取绘图上下文对象。目前，HTML5 支持两种主要的上下文类型：

• 2D 上下文：通过 canvas.getContext('2d') 来获取，用于绘制 2D 图形，像矩形、圆形、文本、图像等。
• WebGL 上下文：借助 canvas.getContext('webgl') 或 canvas.getContext('webgl2') 获取，用于绘制 3D 图形，在游戏、数据可视化等领域应用广泛。

浏览器对上下文对象的支持情况

2D 上下文

• 主流浏览器：绝大多数现代浏览器，像 Chrome、Firefox、Safari、Edge 等，都很好地支持 2D 上下文。这些浏览器的用户能正常使用 <canvas> 进行 2D 图形绘制。
• 旧版浏览器：Internet Explorer 9 及以上版本支持 2D 上下文，而 IE 8 及更早版本不支持 <canvas> 元素。不过，可使用一些第三方库（如 ExplorerCanvas）来为旧版 IE 提供 <canvas> 支持。

WebGL 上下文

• 主流浏览器：现代浏览器（Chrome、Firefox、Safari、Edge）在支持 WebGL 方面表现良好，但前提是用户的显卡驱动和浏览器设置允许使用 WebGL。
• 硬件和驱动要求：WebGL 对硬件和显卡驱动有一定要求。若用户的显卡不支持或驱动过旧，可能无法正常使用 WebGL。此外，部分浏览器可能会出于安全或性能考虑，默认禁用 WebGL。

检测浏览器对上下文对象的支持

为确保代码在不同浏览器环境下都能稳定运行，需要检测浏览器对上下文对象的支持情况。以下是检测 2D 和 WebGL 上下文支持的示例代码：

检测 2D 上下文支持

const canvas = document.