【Canvas】基础

1. Canvas 基础

参考文档：

• MDN 文档
• w3schools
• Canvas 手册

1.1 Canvas 简介

• Canvas 是什么：Canvas 是 HTML5 提供的一个元素，用于通过 JavaScript 绘制图形、动画和图像。
• 使用场景：游戏开发、数据可视化、图像处理、交互式 UI 等。
• 基本用法：

  <canvas id="canvas" width="200" height="200"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d'); // 获取 2D 渲染上下文
  
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 150, 100);
  </script>
  

1.2 坐标系

• Canvas 使用二维坐标系，原点 (0, 0) 在左上角，x 轴向右，y 轴向下。

2. 绘制图形

2.1 绘制矩形

• 绘制矩形：

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

• 示例：

  const canvas = document.getElementById("myCanvas");
  if (canvas.getContext) {
       
      const ctx = canvas.getContext("2d");
  
      ctx.fillRect(25, 25, 100, 100);
      ctx.clearRect(45, 45, 60, 60);
      ctx.strokeRect(50, 50, 50, 50);
  }
  

• 矩形：

  • rect(x, y, width, height)：将一个矩形路径增加到当前路径上

2.2 绘制路径

• 路径操作：
  • beginPath()：开始新路径。
  • moveTo(x, y)：移动画笔到指定点。
  • lineTo(x, y)：从当前点画线到指定点。
  • closePath()：闭合路径。
  • stroke()：绘制路径边框。
  • fill()：填充路径。
• 示例：
  绘制一个三角形：

  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
       
      const ctx = canvas.getContext("2d");
  
      ctx.beginPath();
      ctx.moveTo(50, 50);
      ctx.lineTo(150, 50);
      ctx.lineTo(100, 150);
      ctx.closePath();
      ctx.stroke();
  }
  

2.3 圆形和弧形

• 绘制圆形：
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧。
    • arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的 js 表达式:
      弧度=(Math.PI/180)*角度
  • arcTo(x1, y1, x2, y2, radius)：通过控制点绘制圆弧。
• 示例：

  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
       
       const ctx = canvas.getContext("2d");
  
       ctx.beginPath();
       ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
       ctx.stroke();
   }
  

2.4 贝塞尔曲线

• 二次贝塞尔曲线

  • quadraticCurveTo(cp1x, cp1y, x, y)：绘制二次贝塞尔曲线，cp1x,cp1y 为一个控制点，x,y 为结束点。

• 三次贝塞尔曲线

  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

• 示例：
  二次贝塞尔曲线：

  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
       
      const ctx = canvas.getContext("2d");
  
      ctx.beginPath();
      ctx.moveTo(75, 25);
      ctx.quadraticCurveTo(25, 25, 25, 62.5);
      ctx.stroke();
  }
  

  三次贝塞尔曲线：

  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
       
      const ctx = canvas.getContext("2d");
  
      ctx.beginPath();
      ctx.moveTo(75, 40);
      ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
      ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
      ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
      ctx.stroke();
  }
  

3. 样式和颜色

3.1 填充和描边

• fillStyle：设置填充颜色或渐变。
• strokeStyle：设置描边颜色或渐变。
• 示例：

  // 这些 fillStyle 的值均为“橙色”
  ctx.fillStyle = "orange";
  ctx.fillStyle = "#FFA500";
  ctx.fillStyle = "rgb(255,165,0)";
  ctx.fillStyle = "rgba(255,165,0,1)";
  

3.2 透明度

• rgba() 透明度颜色：

  ctx.strokeStyle = "rgba(255,0,0,0.5)";
  

• globalAlpha 属性

  // 设置透明度值
  ctx.globalAlpha = 0.2;
  

3.3 线型

• lineWidth = value：设置线条宽度。默认值1.0

• lineCap = type：设置线条末端样式。值：butt 、round 、square

• lineJoin = type：设定线条与线条间接合处的样式。 值：round、bevel、miter

• miterLimit = value：限制当两条线相交时交接处最大长度

• getLineDash()：返回一个包含当前虚线样式，长度为非负偶数的数组

• setLineDash(segments)：设置当前虚线样式。

• lineDashOffset = value：设置虚线样式的起始偏移量

• 示例：

  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
       
      const ctx = canvas.getContext("2d");
  
      ctx.lineWidth = 10;
      ctx.lineCap = "round";
      ["round", "bevel", "miter"].forEach((join, i) => {
       
          ctx.lineJoin = join;
          ctx.beginPath();
          ctx.moveTo(10, 5 + i * 40);
          ctx.lineTo(55, 45 + i * 40);
          ctx.lineTo(95, 5 + i * 40);
          ctx