知识库

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="canvas1"></canvas>
  <canvas id="canvas2"></canvas>
  <img src="./imgs/gradient-api.png" alt="">

  <script>
    const canvas1 = document.getElementById('canvas1')
    const context1 = canvas1.getContext('2d')

    canvas1.style.background = '#ddd'

    /**
     * 一个根据指定线路初始化的线性 CanvasGradient 对象。想要应用这个渐变，需要把这个
     * 返回值赋值给 fillStyle 或者 strokeStyle。
     *
     * @param {number} x0 起点的 x 轴坐标。
     * @param {number} y0 起点的 y 轴坐标。
     * @param {number} x1 终点的 x 轴坐标。
     * @param {number} y1 终点的 y 轴坐标。
     * @return {CanvasGradient}
     */

    gradient1 = context1.createLinearGradient(0, 0, canvas1.width, 0)
    // gradient1 = context.createLinearGradient(0, 0, 0, canvas1.height)
    // gradient1 = context.createLinearGradient(0, 0, canvas1.width, canvas1.height)
    // gradient1 = context.createLinearGradient(0, 0, 0, canvas1.height / 2)

    /**
     * 来向渐变色中增加“颜色停止点”
     *
     * @param {number} offset 0 到 1之间的值，超出范围将抛出 INDEX_SIZE_ERR 错误
     * @param {color} color CSS 颜色值 <color>。如果颜色值不能被解析为有效的 CSS
     *  颜色值 <color>，将抛出 SYNTAX_ERR 错误。
     */
    gradient1.addColorStop(0, 'blue')
    gradient1.addColorStop(0.25, 'white')
    gradient1.addColorStop(0.5, 'purple')
    gradient1.addColorStop(0.75, 'red')
    gradient1.addColorStop(1, 'yellow')

    context1.fillStyle = gradient1
    // 线段是从起点延伸到终点，但线段长度比填充范围小时，会使用渐变色中的最后一个颜色来填充
    // canvas 的剩余部分。
    context1.rect(0, 0, canvas1.width, canvas1.height)
    context1.fill()

    const canvas2 = document.getElementById('canvas2')
    const context2 = canvas2.getContext('2d')

    /**
     * 确定两个圆的坐标，绘制放射性渐变的方法
     *
     * @param {number} x0 开始圆形的 x 轴坐标。
     * @param {number} y0 开始圆形的 y 轴坐标。
     * @param {number} ro 开始圆形的半径。
     * @param {number} x1 结束圆形的 x 轴坐标。
     * @param {number} y1 结束圆形的 y 轴坐标。
     * @param {number} r1 结束圆形的半径。
     * @return {CanvasGradient}
     */
    // 放射渐变的填充范围仅局限于这两个圆形所定义的圆锥区域内，不会用最后一个渐变色填充渐变线
    // 以外的区域。
    const gradient2 = context2.createRadialGradient(
      // 底部创建半径为 10 像素且居中的小圆
      canvas2.width / 2,
      canvas2.height,
      10,
      // 顶部创建半径为 50 像素且居中的大圆
      canvas2.width / 2,
      0,
      50
    )
    gradient2.addColorStop(0, 'blue')
    gradient2.addColorStop(0.25, 'white')
    gradient2.addColorStop(0.5, 'purple')
    gradient2.addColorStop(0.75, 'red')
    gradient2.addColorStop(1, 'yellow')
    context2.fillStyle = gradient2
    context2.rect(0, 0, canvas2.width, canvas2.height)
    context2.fill()
  </script>
</body>
</html>