网页 canvas - 其他笔记

<canvas id="mainCanvas" width="800" height="600"></canvas>
<script>
  const canvas = document.querySelector("#mainCanvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "gray"; // 笔设置
  ctx.fillRect(50, 150, 100, 200); // 矩形 fillRect(x, y, w, h)
  ctx.strokeStyle = "green"; // 描边设置
  ctx.strokeRect(200, 150, 100, 200); // 描边矩形 strokeRect(x, y, w, h)

  ctx.beginPath(); // 重置，流程 beginPath、fillStyle、fill 或 stroke
  ctx.arc(400, 150, 50, 0, Math.PI * 2); // 弧 arc(x, y, radius, startAngle, endAngle)
  ctx.fillStyle = "gray";
  ctx.fill(); // 填充

  ctx.beginPath();
  ctx.moveTo(500, 250); // 移动
  ctx.lineTo(600, 350); // 线
  ctx.strokeStyle = "blue";
  ctx.stroke(); // 描画
</script>