HTML5 Canvas CanvasRenderingContext2D 方法详细解读

HTML5 Canvas API 之 CanvasRenderingContext2D

文档地址 Canvas API CanvasRenderingContext2D

1.方法

• arc() 绘制圆弧路径。参数（x, y, radius, startAngle, endAngle, anticlockwise)

  ctx.beginPath();
  ctx.arc(100, 100, 40, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.lineWidth = 10;
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.arc(200, 100, 40, Math.PI, 0, false); // 顺时针
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(200, 102, 40, Math.PI, 0, true); // 逆时针
  ctx.stroke();
  ctx.lineWidth = 1;
  ctx.strokeText("false", 240, 60)
  ctx.strokeText("true", 160, 160)
  

  

• arcTo() 根据控制点和半径绘制圆弧路径，使用当前的描点(前一个moveTo或lineTo等函数的止点)。参数(x1, y1, x2, y2, radius)

  ctx.beginPath();
   ctx.moveTo(150, 150);
   ctx.arcTo(150, 50, 50, 150, 30);
   ctx.stroke();
   // 辅助线
   ctx.setLineDash([5, 5]);
   ctx.strokeStyle = "red";
   ctx.beginPath();
   ctx.moveTo(150, 50);
   ctx.lineTo(150, 150);
   ctx.lineTo(50, 150);
   ctx.lineTo(150, 50);
   ctx.stroke();
  
   ctx.font = "14px serif";
   ctx.setLineDash([]);
   ctx.strokeStyle = "red";
   ctx.strokeText("(150, 150)", 160, 160);
   ctx.strokeStyle = "blue";
   ctx.strokeText("(150, 50)", 160, 40);
   ctx.strokeText("(50, 150)", 20, 170);
  

  

• beginPath() 清空子路径列表开始一个新路径的方法。

  ctx.beginPath();
  ctx.moveTo(150, 150);
  ctx.lineTo(150, 50);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(180, 150);
  ctx.lineTo(180, 50);
  ctx.stroke();
  

• bezierCurveTo() 绘制三次贝赛尔曲线路径的方法。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。参数（x1, y1, x2, y2, x, y）

  ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.bezierCurveTo(150, 40, 150, 80, 60, 120);
    ctx.stroke();
    // 起点
    ctx.beginPath();
    ctx.fillStyle = "green";
    ctx.arc(50, 50, 3, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.strokeStyle = "green";
    ctx.strokeText("起点（50, 50）", 10, 40);
    // 控制点
    ctx.beginPath();
    ctx.fillStyle = "red";
    ctx.arc(150, 40, 3, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.strokeStyle = "red";
    ctx.strokeText("控制点1（150, 40）", 130, 20);
    ctx.beginPath();
    ctx.arc(150, 80, 3, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.strokeText("控制点2（150, 80）", 160, 80);
    // 结束点
    ctx.beginPath();
    ctx.fillStyle = "blue";
    ctx.arc(60,