Gauss Zhou

# 渲染上下文

# 上下文类型一览

我们通过canvas元素的getContext()方法可以获取其渲染上下文，其上下文类型有

  • "2d" 二维渲染上下文 CanvasRenderContext2D
  • "webgl" WebGL 1.0 对应 OpenGL ES 2.0 三维渲染上下文
  • "webgl2" WebGL 2.0 对应 OpenGL ES 3.0 三位渲染上下文
  • "bitmaprender" 位图渲染上下文

# 获取渲染上下文 getContext()

getContext()

canvas 起初是空白的，为了展示，我们需要找到渲染上下文，然后再它的上面绘制。canvas 元素有一个方法getContext()，这个方法用来获取渲染上下文和它的绘画功能。

HTMLCanvasElement.getContext()方法返回canvas的渲染上下文，如果上下文没有定义则返回 null

直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸，这将改变一个画布的水平像素和垂直像素数，就像定义了一张图片的大小一样

如果您发现<canvas>元素中展示的内容变形，您可以通过<canvas>自带的height和width属性进行相关设置，而不要使用CSS。

<body>
  <canvas class="canvas">抱歉，您的浏览器不支持canvas元素~ 算了，直白一点，你的浏览器太low了，请更新好吗！！！</canvas>
</body>

// 获取DOM元素
const canvasEl = document.querySelector(".canvas");
// 判断是否支持canvas，canvas是否具有getContext属性
if (canvasEl.getContext) {
  // 创建一个2D画笔
  const ctx = canvasEl.getContext("2d");
}

关于 Canvas 的可访问性

<canvas> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给可访问性工具

# 示例代码

<template>
  <canvas class="canvas" id="canvas">
    抱歉，您的浏览器不支持canvas元素~ 算了，直白一点，你的浏览器太low了，请更新好吗！！！
  </canvas>
</template>

<style>
.canvas {
  border: 1px dashed #ccc;
}
</style>

实际渲染效果

不出意外的话，应该会出现一个 300x150 大小的带有虚线边框的一个矩形

上下文类型一览
获取渲染上下文 getContext()
示例代码