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.createElement('canvas');
const ctx = canvas.getContext('2d');
if (ctx) {console.log('浏览器支持 2D 上下文');
} else {console.log('浏览器不支持 2D 上下文');
}
检测 WebGL 上下文支持
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
if (gl) {console.log('浏览器支持 WebGL 上下文');
} else {console.log('浏览器不支持 WebGL 上下文');
}
处理不支持的情况
若检测到浏览器不支持所需的上下文对象，可以采取以下措施：
- 显示提示信息：在页面上显示一条提示信息，告知用户他们的浏览器不支持相关功能，建议他们升级浏览器。
- 使用替代方案：对于不支持
<canvas>的情况，可以使用 SVG 或其他图形技术来替代。
总之，在使用 <canvas> 上下文对象时，务必考虑浏览器的支持情况，并进行相应的检测和处理，以确保用户能有良好的体验。
2.2 画笔对象
fillStyle：设置图形填充的颜色、渐变或图案。可以是 CSS 颜色值，如'red'、'#FF0000'，也可以是渐变或图案对象。
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
strokeStyle：设置图形边框的颜色、渐变或图案。用法与fillStyle类似。
ctx.strokeStyle = 'green';
ctx.strokeRect(50, 50, 100, 100);
lineWidth：设置线条的宽度，单位为像素。
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 100, 100);
font：设置绘制文本时使用的字体样式，语法与 CSS 的font属性类似。
ctx.font = '20px Arial';
其他属性如下：
