乐闻世界logo
5月29日 01:55

Canvas 元素是什么？和 SVG 有什么区别？

Canvas 是 HTML5 的 <canvas> 元素，提供一块可编程的像素级绘图表面。通过 JS 获取 2D 渲染上下文（getContext('2d')）或 WebGL 上下文来绘制图形。核心用途：数据可视化、2D 游戏、图像处理、动画、视频特效。与 SVG 的关键区别：Canvas 是栅格模式（像素绘制，适合高频更新和大量对象），SVG 是矢量模式（DOM 节点，适合交互和缩放）。Canvas 不保留绘制对象，每帧是完整重绘。

追问

  • Canvas 2D 和 WebGL 上下文有什么区别？什么场景需要用 WebGL？
  • Canvas 重绘时旧内容去哪了？为什么说 Canvas 是"立即模式"渲染？
  • Canvas 如何实现像素级操作？getImageData 和 putImageData 的性能如何？
  • Canvas 的 width/height 属性和 CSS 宽高不一致时会怎样？
  • 什么情况下应该选 SVG 而不是 Canvas？

写段代码

js
const canvas = document.querySelector('canvas')
canvas.width = 400   // 设置分辨率
canvas.height = 300
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#4a90d9'
ctx.fillRect(10, 10, 100, 80)   // 绘制矩形
ctx.font = '16px sans-serif'
ctx.fillText('Hello Canvas', 120, 50)  // 绘制文字
标签：Canvas