5.5 Canvas 与 SVG 基础介绍

5.5 Canvas 与 SVG 基础介绍

在 HTML5 中，Canvas 和 SVG 是两种主要的图形处理技术，它们各有特点，适用于不同的场景。本节将介绍这两种技术的基础知识，帮助开发者理解它们的区别和应用场景。

Canvas基础

Canvas 是 HTML5 新增的一个元素，它提供了一个可以通过JavaScript绘制图形的位图画布。Canvas 基于像素操作，适合处理动态生成的图像和游戏图形。

基本用法

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 绘制一个红色矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 100, 50);
  
  // 绘制蓝色边框的圆形
  ctx.beginPath();
  ctx.arc(200, 50, 30, 0, Math.PI * 2);
  ctx.strokeStyle = 'blue';
  ctx.stroke();
</script>

Canvas特点

1. 基于像素的位图绘制
2. 通过 JavaScript API 操作
3. 适合游戏、数据可视化等动态图形
4. 绘制完成后无法直接修改单个元素
5. 性能较高，适合复杂动画

SVG基础

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式，可以直接嵌入HTML文档中。SVG图形由数学公式定义，可以无限缩放而不失真。

基本用法

<svg width="300" height="150">
  <!-- 红色矩形 -->
  <rect x="10" y="10" width="100" height="50" fill="red" />
  
  <!-- 蓝色边框的圆形 -->
  <circle cx="200" cy="50" r="30" stroke="blue" stroke-width="2" fill="none" />
</svg>

SVG特点

1. 基于矢量的图形描述
2. 使用XML语法，可直接嵌入HTML
3. 图形元素可单独操作和修改
4. 适合图标、图表和可缩放的UI元素
5. 支持CSS样式和JavaScript交互

Canvas与SVG对比

选择建议

1. 选择Canvas当需要：

   • 处理大量图形元素
   • 制作游戏或复杂动画
   • 进行像素级操作
   • 生成动态图像如数据可视化

2. 选择SVG当需要：

   • 创建可缩放的图形
   • 需要单独操作图形元素
   • 图形需要支持CSS样式
   • 需要良好的可访问性

结合使用示例

在实际开发中，Canvas和SVG也可以结合使用，发挥各自的优势：

<!-- SVG作为UI元素，Canvas处理动态内容 -->
<div class="graphics-container">
  <svg class="ui-elements" width="300" height="50">
    <rect class="button" x="10" y="10" width="80" height="30" rx="5" />
    <text x="50" y="30" text-anchor="middle" fill="white">开始绘制</text>
  </svg>
  
  <canvas id="dynamicContent" width="300" height="200"></canvas>
</div>

<script>
  document.querySelector('.button').addEventListener('click', function() {
    const canvas = document.getElementById('dynamicContent');
    const ctx = canvas.getContext('2d');
    
    // 在Canvas上绘制随机图形
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 50%)`;
    ctx.fillRect(
      Math.random() * 250,
      Math.random() * 150,
      50, 50
    );
  });
</script>

学习建议

1. 从简单的图形绘制开始练习
2. 理解坐标系和绘制顺序
3. 逐步尝试动画效果
4. 学习性能优化技巧
5. 结合实际项目需求选择合适的技术

通过掌握 Canvas 和 SVG 的基础知识，开发者可以在Web项目中实现丰富的图形效果和交互体验。后续章节将深入探讨Canvas的高级用法和SVG的更多特性。