学习canvasHTML中的元素canvas只支持一种原生的图形绘制：矩形。canvas提供了三种方法绘制矩形fillR

<!DOCTYPE>
<html>
  <head>
    <style type="text/css">
      canvas { border: 1px solid #666;}
    </style>
  </head>
  <canvas id="canvas1"></canvas>
</html>
<script>
  let canvas1 = document.getElementById('canvas1')      //通过id获取canvas元素
  let ctx1 = canvas1.getContext('2d') 
  ctx1.fillStyle = 'rgb(200, 0, 0)'
  ctx1.fillRect(10, 10, 55, 50)
  ctx1.fillStyle = 'rgba(0, 0, 200, 0.5)'
  ctx1.fillRect(25, 25, 55, 50)
</script>

HTML中的元素canvas只支持一种原生的图形绘制：矩形。 canvas提供了三种方法绘制矩形

fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形的边框
clearRect(x, y, width, height) 清除指定矩形区域, 让清除部分完全透明

导出图像

使用toDataURL方法, 可以导出在元素上绘制的图像, 该方法接受一个参数, 即图像的MIME类型格式