console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById('canvas'); // 获取 DOM 对象
      const ctx = canvas.getContext('2d'); // 获取 Canvas 对象
      ctx.fillStyle = 'red'; // 填充为红色
      ctx.fillRect(0, 0, 50, 50); // 绘制矩形 (x, y, 宽, 高)

      ctx.beginPath(); // 开始绘制路径
      ctx.lineWidth = 1; // 线条宽度
      ctx.strokeStyle = 'blue'; // 线条填充色
      ctx.moveTo(100, 100); // 起点坐标
      ctx.lineTo(250, 75); // 中间点坐标
      ctx.lineTo(300, 100); // 终点坐标
      ctx.stroke(); // 绘制线段

      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'green'; // 圆形边框色
      ctx.fillStyle = 'red'; // 圆形填充色
      ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形 (x, y, r, 起始角度)
      ctx.stroke(); // 绘制圆形的边框
      ctx.fill(); // 绘制圆形的填充色

      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = 'red';
      ctx.moveTo(300, 300);
      ctx.lineTo(301, 301); // 绘制一个点
      ctx.stroke();

      // 详情参看 canvas api https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
    </script>
  </body>
</html>