canvas用于通过JavaScript在网页上绘制图形，提供像素级控制，适合高性能动态图形场景。
canvas标签主要用来在网页上通过JavaScript绘制图形。它提供了一块空白的绘图区域，你可以用代码在这上面画出各种形状、文字、图片，甚至复杂的动画和游戏界面。它本质上是一个位图（bitmap）画布，意味着你操作的是像素。
解决方案
说起
canvas，我总觉得它像是一张数字化的素描本，只不过画笔和颜料都变成了JavaScript代码。当你把它放到HTML里，它本身只是一个DOM元素，一个尺寸确定的矩形区域，但真正神奇的地方在于它提供了一个2D渲染上下文（
CanvasRenderingContext2D），通过这个上下文，我们才能用各种API在上面点墨挥毫。
你可以想象一下，从最简单的画线、画矩形、画圆，到绘制复杂的路径、填充颜色、描边，再到处理图片（比如裁剪、滤镜、缩放），甚至实时渲染视频帧，或者构建一个完整的2D游戏引擎，
canvas都能胜任。它不像传统的HTML元素那样受限于盒模型和CSS样式，而是给了你像素级的控制能力。这在需要高性能、高动态变化的图形场景下，比如数据可视化图表、在线图像编辑器、互动游戏等，显得尤为强大。它把网页从静态内容的展示平台，进一步推向了动态、交互式体验的创造空间。
canvas
和SVG
有什么区别，我应该如何选择？
这几乎是我每次聊到Web图形时都会被问到的问题，也是一个非常核心的理解点。简单来说，
canvas是位图（raster），而
SVG是矢量（vector）。
canvas就像你用Photoshop或画笔工具在画布上画画，你操作的是像素点。当你放大时，图像可能会变得模糊或出现锯齿，因为它只是把像素点放大。它的优势在于处理大量的像素操作，比如图像滤镜、复杂的像素级动画、游戏场景渲染等。当图形内容非常复杂，或者需要频繁进行像素级别的修改时，
canvas的性能优势就体现出来了，因为它直接操作像素缓冲区，避免了大量的DOM操作开销。
SVG则像你用Illustrator或CAD软件画图，你定义的是图形的数学描述（比如“一个半径为100的圆”），而不是具体的像素点。所以，无论你放大多少倍，它都能保持清晰锐利，因为它会根据新的尺寸重新计算并渲染图形。
SVG的每个图形元素都是DOM的一部分，你可以用CSS来样式化，用JavaScript来操作。这对于需要保持清晰度、可缩放、且图形结构相对稳定（比如Logo、图标、静态图表）的场景非常理想。SEO友好也是
SVG的一个优点，因为它是基于XML的文本格式。
至于如何选择，我的经验是：
-
选择
canvas
：如果你需要进行像素级别的操作、处理大量图像数据、制作高性能的2D游戏、或者需要绘制非常动态且复杂的图表（比如实时股票走势图）。 -
选择
SVG
：如果你需要图形在任何分辨率下都保持清晰、图形结构相对简单且需要频繁的DOM操作（比如点击某个图形元素触发事件）、或者对可访问性和SEO有较高要求。
很多时候，它们甚至可以结合使用，比如
SVG负责界面元素，
canvas负责核心的动态渲染区域。
如何开始使用canvas
绘制图形？基础步骤和常见陷阱
要上手
canvas其实不难，但有些地方确实容易让人绊倒。我来给你捋一捋基本流程，顺便提点儿我踩过的坑。
首先，你需要一个HTML的
canvas元素：
注意，这里的
width和
height属性非常重要，它们定义了
canvas的绘图表面大小。如果你只用CSS来设置宽度和高度，那么
canvas内部的绘图表面会默认是300x150像素，然后被CSS拉伸，导致图形模糊。这是个常见的陷阱！
接着，用JavaScript获取这个
canvas元素和它的2D渲染上下文：
const canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
// 现在你可以用ctx来画图了
// 绘制一个矩形
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 100, 75); // 绘制一个填充矩形 (x, y, width, height)
// 绘制一个描边矩形
ctx.strokeStyle = 'red'; // 设置描边颜色
ctx.lineWidth = 2; // 设置描边宽度
ctx.strokeRect(200, 50, 100, 75); // 绘制一个描边矩形
// 绘制一条线
ctx.beginPath(); // 开始一条新路径
ctx.moveTo(50, 150); // 移动到起点
ctx.lineTo(200, 250); // 画到终点
ctx.stroke(); // 描边路径
// 绘制一个圆
ctx.beginPath();
ctx.arc(300, 200, 40, 0, Math.PI * 2, true); // 圆心(300,200), 半径40, 完整圆
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆
ctx.strokeStyle = 'black';
ctx.stroke(); // 描边圆
}常见陷阱：
-
忘记
getContext('2d')检查：虽然现在浏览器支持度很高，但养成习惯总是好的。 -
坐标系统：
canvas
的0,0
点在左上角，X轴向右增加，Y轴向下增加。这和数学上的笛卡尔坐标系Y轴向上增加有所不同，初学者容易搞混。 -
路径管理：每次绘制独立的图形（特别是线条、圆弧等），最好都用
ctx.beginPath()
开始新路径，绘制完后用ctx.stroke()
或ctx.fill()
来完成。如果不beginPath()
，后续的绘制可能会连接到之前的路径上，导致意想不到的图形。 -
状态保存与恢复：
ctx.save()
和ctx.restore()
是管理绘图状态（如颜色、变换、线宽等）的利器。当你需要临时改变一些设置来绘制特定图形，然后又想恢复到之前的状态时，它们非常有用。不使用它们，你可能需要手动重置所有状态。
canvas
在实际项目中能实现哪些高级功能？性能优化怎么做？
canvas的能力远不止画几个基本图形那么简单，它在实际项目中能玩出很多花样，尤其是在那些对视觉表现力要求极高的场景。
高级功能：
-
图像处理与滤镜：你可以把图片加载到
canvas
上，然后通过getImageData()
获取像素数据，对每个像素的颜色值进行修改（比如灰度化、反色、模糊、锐化等），再用putImageData()
放回去。这简直就是浏览器里的一个轻量级图像编辑器。 -
视频帧处理：想象一下，你可以把
video
元素的内容实时绘制到canvas
上，然后对每一帧进行处理，比如添加水印、实时滤镜，甚至进行人脸识别的预处理。 -
数据可视化：这块是
canvas
的强项。复杂的图表，如热力图、力导向图、大规模散点图、动态仪表盘等，用canvas
绘制可以获得极高的性能和自定义能力。当你需要绘制成千上万个数据点，并且需要流畅的交互时，canvas
是首选。 -
游戏开发：2D游戏的精灵动画、碰撞检测、地图渲染、粒子系统，
canvas
是构建这些的核心。像PixiJS、Phaser这样的库，都是基于canvas
（或WebGL）来构建其渲染引擎的。 -
Web Components中的自定义渲染：如果你在构建自定义的Web组件，需要非常独特的、高性能的UI渲染，
canvas
可以作为其内部的渲染层。
性能优化： 在玩转这些高级功能时，性能往往是瓶颈。我总结了一些经验：
-
使用
requestAnimationFrame
进行动画：这是浏览器优化动画的最佳实践，它会在浏览器准备好绘制下一帧时调用你的函数，确保动画流畅且节能。 -
离屏
canvas
（Offscreen Canvas）：对于复杂的、不常变的图形，可以在一个不可见的canvas
上预先绘制好，然后直接将这个离屏canvas
的内容绘制到主canvas
上。这样可以避免重复计算和绘制。 -
最小化状态改变：每次改变
fillStyle
、strokeStyle
、lineWidth
等绘图状态都会有一定开销。尽量将相同状态的绘图操作放在一起，减少状态切换的次数。 -
避免浮点数坐标：在
canvas
上，如果你的绘图坐标不是整数，浏览器在渲染时需要进行抗锯齿处理，这会消耗额外的CPU。尽量将坐标四舍五入到整数，或者使用ctx.translate(0.5, 0.5)
来解决单像素线模糊问题。 -
只清除必要区域：如果你的动画只影响
canvas
的一小部分，没必要每次都clearRect(0, 0, canvas.width, canvas.height)
清除整个画布。只清除需要更新的区域可以显著提升性能。 -
缓存复杂路径：如果某个复杂路径需要反复绘制，可以先用
Path2D
对象预定义好，然后直接使用它来fill()
或stroke()
。 -
避免在循环中获取上下文：
getContext('2d')的调用是有开销的，通常在初始化时获取一次即可。
这些优化技巧，有些可能微不足道，但当它们组合起来，尤其是在高帧率、复杂渲染的场景下，就能带来肉眼可见的流畅度提升。
canvas是一个深奥但回报丰厚的技术领域，值得我们投入时间和精力去探索。
