Canvas API 是 HTML5 提供的 2D 绘图工具，允许通过 JavaScript 动态绘制图形、图像和动画。以下是核心功能与方法的说明：

🔧 基础用法

  1. 创建 Canvas 元素
    在 HTML 中添加 <canvas id="myCanvas" width="500" height="500"></canvas>，并通过 JavaScript 获取上下文：

    const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

  2. 绘制形状

    • fillRect(x, y, width, height)：填充矩形
      canvas_矩形
    • strokeRect(x, y, width, height)：绘制矩形边框
      canvas_边框
    • arc(x, y, radius, startAngle, endAngle)：绘制圆形或弧线

  3. 图像处理

    • 使用 drawImage() 方法绘制图片
    • 通过 ctx.filter 实现滤镜效果（如模糊、灰度）

📊 常用方法速查

方法名 用途 示例代码
beginPath() 开始新路径 ctx.beginPath();
moveTo(x, y) 移动画笔到指定坐标 ctx.moveTo(100, 100);
fill() 填充当前路径 ctx.fill();
clearRect() 清除画布区域 ctx.clearRect(0, 0, 500, 500);
canvas_路径示意图

🌐 扩展阅读

⚠️ 注意事项

  1. 性能限制：频繁重绘可能导致卡顿，建议使用 requestAnimationFrame
  2. 跨域问题：加载外部图片时需处理 CORS 策略
  3. 响应式设计：通过 CSS 或 JavaScript 动态调整画布尺寸

如需进一步探索，可访问Canvas API 官方文档获取完整参数说明。