一、介绍

Canvas 是 HTML5 提供的一个绘图元素，通过 JavaScript 动态生成图形、动画和图像。它本质上是一个“画布”，开发者可以通过脚本语言（如 JavaScript）在网页上绘制复杂的图形内容。

1、核心特性

1. 基于像素的绘图
   Canvas 绘制的是位图（像素点），适合动态、高性能的图形操作（如游戏、动画）。

2. 2D 和 3D 支持

   • 2D 绘图：通过 CanvasRenderingContext2D API 实现基本图形（线条、矩形、圆形等）。
   • 3D 绘图：通过 WebGL API 支持复杂的 3D 渲染（需要浏览器支持）。

3. 实时操作
   可以通过 JavaScript 动态修改画布内容，适合需要频繁更新的场景（如数据可视化、游戏）。

2、基本用途

• 绘制形状：线条、矩形、圆形、多边形等。
• 渲染文本：自定义字体、颜色和样式。
• 图像处理：加载、裁剪、滤镜、像素级操作。
• 动画：通过逐帧绘制实现动态效果。
• 游戏开发：结合键盘/鼠标事件实现交互式游戏。
• 数据可视化：绘制图表（折线图、柱状图、散点图）。

二、常用 API

• 形状绘制

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

• 路径操作

  • beginPath()：开始新路径。
  • moveTo(x, y)：移动画笔到指定坐标。
  • lineTo(x, y)：绘制直线到指定坐标。
  • stroke()：描边路径。
  • fill()：填充闭合路径。

• 图像处理

  • drawImage(image, x, y)：绘制图片。
  • getImageData()：获取像素数据。
  • putImageData()：修改像素数据。

• 变换与动画

  • translate(x, y)：平移坐标系。
  • rotate(angle)：旋转画布。
  • requestAnimationFrame()：实现流畅动画。

三、简单示例

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
  // 获取 Canvas 上下文
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

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

  // 绘制蓝色边框圆形
  ctx.beginPath();
  ctx.arc(250, 100, 40, 0, 2 * Math.PI);
  ctx.strokeStyle = "blue";
  ctx.stroke();
</script>

四、优点与缺点

优点	缺点
高性能，适合复杂图形和实时渲染。	绘制的图形是静态的，无法直接绑定事件（需手动计算坐标）。
支持像素级操作（如滤镜、图像处理）。	文本渲染功能较弱（对比 SVG）。
跨浏览器兼容性好。	无法缩放后保持清晰（位图特性）。

五、总结

Canvas 是 HTML5 中强大的绘图工具，适合需要高性能、动态图形渲染的场景（如游戏、数据可视化）。开发者通过 JavaScript 直接操作像素，灵活度高，但需注意其位图特性带来的限制。对于简单图形或需要事件交互的场景，可结合 SVG 使用。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24