<!-- 
  id:标识元素的唯一性
  width:画布的宽度
  height:画布的高度
-->
<canvas id="c1" width="600" height="600">
  当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
  // 1.找到画布
  let c1 = document.getElementById('c1')

  //  判断是否有getContext
  if (!c1.getContext) {
    console.warn('当前浏览器版本不支持canvas，请升级浏览器')
  }
  // 2.获取画笔，上下文对象
  let ctx = c1.getContext('2d')
  console.log('ctx :>> ', ctx)
  // 3.绘制图形
  // 3.1绘制矩形 .fillRect(位置x,位置y,宽度,高度)
  ctx.fillRect(100, 100, 100, 100)
</script>