知识库

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, 
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <img src="./imgs/rect-api.png" alt="">

  <script>
    const canvas = document.getElementById('canvas')
    const context = canvas.getContext('2d')

    canvas.style.backgroundColor = '#ddd'
    canvas.width = 600
    canvas.height = 300

    /**
     * strokeRect 矩形描边，描绘一个起点在 (x, y)、宽度为 w、高度为 h 的矩形的方法。
     * 
     * @param {number} x 矩形起点的 x 轴坐标。
     * @param {number} y 矩形起点的 y 轴坐标。
     * @param {number} width 矩形的宽度。正值在右边，负值在左边。
     * @param {number} height 矩形的高度。正值在下边，负值在上边。
     */
    
    // 此方法直接绘制到画布而不修改当前路径，因此任何后续 fill() 或 stroke() 对它没有影响。
    context.strokeStyle = 'red'
    context.lineWidth = 5
    context.lineJoin = 'round'
    context.strokeRect(10, 10, 200, 100) 
   
    context.fillStyle = 'blue'
    context.fillRect(10, 120, 100, 100) // 矩形的填充
    // context.clearRect(10, 120, 100, 100) // 矩形的清除，这个范围内的画布被清空。

    context.rect(120, 120, 100, 100) // 创建一条路径，需要调用 fill() / stroke() 进行绘制。
    
    context.strokeStyle = 'green'
    context.lineWidth = 2
    context.stroke()
  </script>
</body>
</html>