使用Canvas和SVG分别绘制一个红色圆形

题目

使用Canvas和SVG分别绘制一个红色圆形

信息

• 类型：问答
• 难度：⭐

考点

Canvas基本绘图,SVG基本语法,Canvas与SVG区别

快速回答

使用Canvas和SVG绘制红色圆形的方法：

• Canvas：通过JavaScript API绘制，需要获取上下文后使用arc()方法
• SVG：直接在HTML中使用<circle>标签声明式绘制
• 核心区别：Canvas是位图绘制（脚本驱动），SVG是矢量图形（DOM元素）

1. 原理说明

Canvas：基于像素的绘图API，通过JavaScript指令动态生成位图。绘制过程是命令式的，修改图形需要重绘整个画布。

SVG：基于XML的矢量图形格式，每个图形都是DOM元素，可通过CSS/JavaScript直接操作，支持事件绑定。

2. 代码示例

Canvas实现：

<canvas id="myCanvas" width="100" height="100"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制红色圆形
  ctx.beginPath();
  ctx.arc(50, 50, 40, 0, Math.PI * 2); // 圆心(50,50) 半径40
  ctx.fillStyle = 'red';
  ctx.fill();
</script>

SVG实现：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

3. 最佳实践

• Canvas适用场景：像素级操作（如图像处理）、游戏动画、大数据量绘制
• SVG适用场景：图标、可交互图表、需要缩放的矢量图形
• 性能提示：Canvas适合频繁重绘，SVG适合静态或少量动态图形

4. 常见错误

• Canvas：忘记beginPath()导致样式污染，未设置canvas尺寸导致变形
• SVG：混淆属性命名（如用style代替fill），忘记定义xmlns命名空间
• 通用错误：在Canvas中尝试绑定图形事件（应绑定到canvas元素本身）

5. 扩展知识

• Canvas优化：使用requestAnimationFrame动画，离屏渲染
• SVG高级特性：渐变、滤镜、路径动画（SMIL）
• 响应式设计：SVG天生支持自适应，Canvas需监听resize事件重绘
• 混合使用：复杂场景可结合两者，如用SVG做UI控件，Canvas渲染背景