Javascript GetContext

当我们使用Javascript处理图像时，需要使用HTML5提供的Canvas元素和2D Context API来操作图像。

在HTML5中，Canvas元素是被视为画布，可以在上面绘制2D、3D的图形，而getContext()是一个非常重要的方法，它用于获取Canvas的2D绘图环境。

语法

context = canvas.getContext(contextType, contextAttributes);

参数

• contextType: 指定所请求的绘图环境，只能取下列值之一：
  • '2d'：表示一个二维绘图的环境。
  • 'webgl'或'experimental-webgl'：表示一个浏览器以及操作系统支持的WebGL绘图环境。
• contextAttributes（非必填）：这个参数是一个属性的对象，能够被用来指定特定的WebGL rendering context options。这个对象是拥有如下一个或多个属性的普通 JavaScript对象：
  • alpha：这是一个 Boolean 类型的参数，默认为true，表示在 Canvas 后面绘制的图形是否包含透明效果。
  • depth：默认为true，表示 canvas 的深度缓存（The depth buffer）包含模板缓存 (The stencil buffer)。
  • stencil：默认为false，表示 canvas 的绘图表面是否包含模版缓存 (The stencil buffer)。
  • antialias：Boolean 类型参数，默认值取决于浏览器厂商，表示是否开启抗锯齿。
  • premultipliedAlpha： Boolean 类型参数，默认为true，解释：如果在绘图操作或者纹理放置操作中，不存在纹理存在半透明效果，那么最终的运算结果可以很高效。
  • preserveDrawingBuffer：默认值为false，表示当绘画缓冲区（The drawing buffer）符合 clear-color 值条件，或者有绘画操作发生时，绘图buffer是否被保留。

返回值

这个方法返回的是一个对象，用来提供2D绘制环境所实现的各种方法。

示例

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

Conclusion

在Javascript中获取Canvas的2D绘图环境是必须掌握的技能，在使用它的过程中，可以结合其他API来实现图像的处理，例如：

• drawImage()：在Canvas中绘制图片。
• fillRect()：在Canvas中绘制矩形。
• strokeRect()：在Canvas中绘制矩形的轮廓。
• fillText()：在Canvas中绘制文本。
• strokeText()：在Canvas中绘制文本的轮廓。