Canvas

在 Canvas(画布)上可以使用 JS 绘制 2D 图形，绘制图形的单位是像素即位图。 能够以 .png 或 .jpg 格式保存结果图像 弱的文本渲染能力，渲染性能较高，适合游戏、数据可视化场景。 但是 Canvas 不能给单独元素添加事件。

使用步骤

1. 添加<canvas/>标签，设置id和height width
2. 获取 Canvas DOM 对象：document.getElementById('canvas')
3. 获取画笔：调用对象的getContext('2d')方法，获取CanvasRenderingContext2D对象
4. 调用CanvasRenderingContext2D对象的绘制方法绘制图形

浏览器支持情况检测

<canvas id="canvas">
  <!-- 方案一：在canvas标签内添加提示，如果浏览器不支持canvas会将canvas最为普通标签并展示标签内内容 -->
  浏览器不支持Canvas
</canvas>

<script>
  // 方案二：检测元素是实例是否有getContent方法
  const canvas = document.getElementById("canvas");
  if (!canvas.getContent) {
    alert("浏览器不支持Canvas");
  }
</script>

Canvas 尺寸和 CSS 尺寸

<canvas height="100" width="100" style="width: 50px; height: 50px" />

使用 style 可以设置 canvas 在页面中的尺寸，canvas 本身的width和height是画笔绘制使用的尺寸，两个尺寸不一致是会按照 style 的尺寸进行缩放。

画笔