初始化

可以使用canvas标签初始化，也可以js动态创建。

区别： canvas标签初始化创建的会是一个HTMLElement，js中无法识别为canvas元素(HTMLCanvasElement)

• canvas标签初始化(写在html里，省略了其他非重要解构)

<canvas width="600" height="400" id="canvas"></canvas>
<script>
  // 1、获取标签
  const canvas = document.getElementById('canvas');

  // 2、获取画笔对象
  const ctx = canvas.getContext('2d');

  // 3、画图
  // 以方形为例: fillRect(x,y, width, height);
  ctx.fillRect(100, 100, 200, 300);
</script>

• JS方式初始化(写在js里)

// 1、创建画布
const canvas = document.createElement('canvas');

canvas.width = 600;
canvas.height = 400;
document.body.append(canvas);

// 2、获取画笔
const ctx = canvas.getContext('2d');

// 3、画图
// 以方形为例: fillRect(x,y, width, height);
ctx.fillRect(100, 500, 200, 300);