canvas 与图形

HTML5 中的 <canvas> 标签是一个用于绘制图形的画布区域。它本身是一个容器，依赖 JavaScript 来绘制各种二维图形和动画。

基本用法

<canvas
  id="myCanvas"
  width="400"
  height="200"
  style="border:1px solid #000;"
></canvas>

通过 JavaScript 获取画布上下文（context），开始绘制：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 获取2D绘图上下文

// 绘制一个红色矩形
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 150, 100);

常用绘图方法

• fillRect(x, y, width, height)：绘制填充矩形。
• strokeRect(x, y, width, height)：绘制矩形边框。
• clearRect(x, y, width, height)：清除画布指定区域。
• beginPath() 和 closePath()：开始和关闭路径。
• moveTo(x, y) 和 lineTo(x, y)：绘制路径线段。
• arc(x, y, radius, startAngle, endAngle)：绘制圆弧或圆形。
• fill() 和 stroke()：填充或描边路径。

应用场景

• 图形绘制：画图、绘制形状。
• 动画制作：游戏、交互动画。
• 数据可视化：图表、仪表盘。
• 图像处理：滤镜、特效。

注意事项

• <canvas> 是位图画布，绘制内容不是 DOM 元素，不能直接被选中或操作。
• 需要用 JavaScript 动态绘制内容。
• 支持二维（2D）和三维（WebGL）绘图。

小结

<canvas> 提供了灵活强大的图形绘制能力，是 HTML5 中实现动态视觉效果和复杂交互的重要工具。