canvas标签本身是空白画布，无绘图能力，需通过javascript的getcontext('2d')获取2d渲染上下文进行绘图；2. 绘图步骤包括定义canvas元素、获取上下文、设置样式与路径、调用fill或stroke等方法绘制图形；3. canvas基于像素，适合高频更新的场景如游戏、动画、图像处理，而svg基于矢量且属于dom，适合可交互、可缩放的图标、图表等；4. 实现交互需手动实现命中检测，通过记录图形数据、监听鼠标事件、计算坐标判断是否点击或拖拽图形，并重绘画面；5. 性能优化策略包括减少重绘区域、批量绘制、避免频繁状态切换、使用requestanimationframe、离屏canvas、多层canvas、图片精灵图及合理使用save/restore，同时借助开发者工具分析性能瓶颈。最终选择canvas或svg应根据具体需求权衡性能与交互性。
canvas标签在HTML5中，本质上就是一块空白的、基于像素的画布区域，它自身不具备任何绘图能力。所有的绘图功能都必须通过JavaScript API来驱动，你可以把它想象成一个可以被程序控制的画板，你用代码告诉它画什么、画在哪里、用什么颜色。
解决方案
要使用canvas标签进行绘图，核心步骤是获取其渲染上下文（rendering context）。最常见的是2D上下文，通过getContext('2d')方法获取。一旦你有了这个上下文对象，就像拿到了一支画笔和颜料，就可以调用它提供的方法来绘制各种图形了。
首先，在HTML中定义你的画布：
这里我给它设置了ID、宽度、高度，以及一个边框，这样在页面上就能看到它的存在。
接着，在JavaScript中，我们开始真正的绘图工作。比如，画一个矩形：
const canvas = document.getElementById('myDrawingCanvas');
// 检查浏览器是否支持canvas，虽然现在基本都支持了，但这是个好习惯
if (canvas.getContext) {
const ctx = canvas.getContext('2d'); // 获取2D渲染上下文
// 绘制一个填充矩形
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.fillRect(50, 50, 150, 100); // x, y, width, height
// 绘制一个描边矩形
ctx.strokeStyle = 'red'; // 设置描边颜色
ctx.lineWidth = 5; // 设置描边宽度
ctx.strokeRect(250, 50, 150, 100);
// 绘制路径：画一条线
ctx.beginPath(); // 开始一条新路径
ctx.moveTo(50, 200); // 移动到起点
ctx.lineTo(200, 300); // 画一条线到终点
ctx.lineTo(50, 400); // 再画一条线
ctx.strokeStyle = 'green';
ctx.stroke(); // 描边路径
// 绘制圆形
ctx.beginPath();
ctx.arc(500, 250, 70, 0, Math.PI * 2, false); // x, y, radius, startAngle, endAngle, anticlockwise
ctx.fillStyle = 'purple';
ctx.fill(); // 填充圆形
// 绘制文本
ctx.font = '48px serif';
ctx.fillStyle = 'black';
ctx.fillText('Hello Canvas!', 50, 500); // 文本内容, x, y
// 绘制图片（需要先加载图片）
const img = new Image();
img.src = 'your-image.png'; // 替换为你的图片路径
img.onload = () => {
ctx.drawImage(img, 600, 350, 150, 100); // 图片对象, x, y, width, height
};
// 状态保存与恢复
ctx.save(); // 保存当前绘图状态（颜色、线宽、变换等）
ctx.fillStyle = 'orange';
ctx.fillRect(50, 550, 50, 50);
ctx.restore(); // 恢复到上一个保存的状态
ctx.fillRect(120, 550, 50, 50); // 这个矩形会是蓝色（因为恢复了初始状态）
}这些只是canvas绘图API的冰山一角。你可以通过组合这些基本操作，实现从简单的图形到复杂的动画、游戏乃至数据可视化界面。它的强大之处在于提供了像素级的控制，这意味着理论上你可以画出任何你想要的东西。
Canvas与SVG有什么区别？它们各自的适用场景是什么？
谈到canvas，就很难不把它拿来和SVG（Scalable Vector Graphics）作比较，这俩都是前端图形绘制的利器，但骨子里完全不同。我个人觉得，理解它们的区别是选择合适工具的关键。
canvas是基于像素的，也就是所谓的“位图”（raster graphics）。你用JavaScript在上面画一条线，实际上是在操作一个个像素点，把它们染成你想要的颜色。一旦画上去，它就成了像素的一部分，你不能直接选中这条“线”来改变它的颜色或位置，因为那条线本身已经不存在了，只剩下被改变的像素。这就像你在纸上用笔画画，画完了就是画完了，想改只能擦掉重画。这种“即时模式”（immediate mode）的绘图方式，让canvas在处理大量像素级操作时效率很高，比如游戏动画、实时视频处理或者图像滤镜。它的内容不属于DOM树，所以你无法直接用CSS或者DOM API来操作画布上的图形元素。
而SVG呢，它是基于矢量的，一种XML格式的描述语言。你画一个圆，SVG会记录下这个圆的中心点、半径、颜色等属性。这个圆本身是一个独立的DOM元素，你可以通过CSS来改变它的颜色、大小，也可以用JavaScript来监听它的点击事件、拖拽它。这就像你用CAD软件画图，每个图形都是一个对象，可以随时编辑。这种“保留模式”（retained mode）的绘图方式，使得SVG在需要高度交互、可伸缩、打印质量的图形方面表现出色。比如图标、Logo、流程图、或者需要响应式布局的图表。
那么，具体到适用场景：
-
canvas更适合：- 游戏开发： 需要频繁更新屏幕、像素级操作、复杂动画效果。
- 数据可视化： 绘制非常庞大、密集的数据集，比如散点图有几百万个点，或者需要实时更新的图表。
- 图像处理： 比如实现图片滤镜、图像编辑器等，直接操作像素数据。
-
实时视频处理： 结合
getUserMediaAPI，可以对视频流进行实时分析和渲染。
-
SVG 更适合：
- 图标和Logo： 无论放大多少倍都不会失真，保持清晰。
- 交互式图表： 当你需要点击图表中的某个柱子，获取数据，或者对图表元素进行细粒度控制时。
- 地图： 绘制可缩放、可交互的地图。
- 打印和高分辨率显示： 矢量图形天生适合这些场景。
- 复杂的用户界面组件： 如果你需要自定义一些不规则形状的UI元素，并且希望它们能响应事件。
选择哪个，很多时候取决于你的具体需求。如果我需要一个高性能的动画或者要处理大量的像素数据，我肯定会倾向于canvas。但如果我需要一个可以随意缩放、并且每个元素都能独立响应事件的图表，那SVG会是我的首选。它们不是非此即彼的关系，有时甚至可以结合使用，比如用SVG作为背景，canvas在上面进行实时动画渲染。
如何在Canvas上实现交互式绘图，例如鼠标拖拽和点击事件？
canvas本身不像HTML元素那样，你画了一个矩形，它就自带一个点击事件。记住，canvas上的一切都是像素。这意味着，如果你想让用户点击或者拖拽你画的某个图形，你需要自己去实现“命中检测”（hit testing）的逻辑。这听起来有点复杂，但其实就是数学和逻辑的组合。
基本思路是：
-
记录图形信息： 你不能只画完就完事。你需要把每个画在
canvas上的图形的类型、位置、大小、颜色等关键信息存储起来，通常是一个JavaScript数组，里面装着各种图形对象。 -
监听
canvas元素事件： 你在canvas元素本身上添加鼠标事件监听器，比如mousedown、mousemove、mouseup、click。 -
获取鼠标坐标： 在事件回调中，获取鼠标相对于
canvas左上角的坐标。这通常需要用到event.clientX、event.clientY结合canvas.getBoundingClientRect()来计算。 -
命中检测： 这是核心。当你获得鼠标坐标后，遍历你存储的图形数组。对于数组中的每一个图形对象，根据它的类型（矩形、圆形、线段等）和存储的坐标信息，判断当前鼠标坐标是否落在了这个图形的“边界”之内。
- 矩形： 判断鼠标X坐标是否在矩形X范围内，Y坐标是否在矩形Y范围内。
- 圆形： 计算鼠标点到圆心的距离，如果小于或等于半径，则命中。
- 线段： 判断鼠标点到线段的距离是否小于某个阈值（比如线的宽度的一半）。这个稍微复杂一点，可能需要用到点到线段的距离公式。
-
执行相应操作： 如果命中某个图形，你就可以根据需要改变它的属性（比如拖拽时改变
x、y坐标），然后重新绘制整个canvas。
举个简单的拖拽矩形的例子：
const canvas = document.getElementById('myDrawingCanvas');
const ctx = canvas.getContext('2d');
let shapes = [
{ x: 50, y: 50, width: 100, height: 80, color: 'rgba(255, 0, 0, 0.7)', type: 'rect' },
{ x: 200, y: 150, radius: 60, color: 'rgba(0, 0, 255, 0.7)', type: 'circle' }
];
let isDragging = false;
let draggedShape = null;
let startX, startY;
function drawShapes() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
shapes.forEach(shape => {
ctx.fillStyle = shape.color;
if (shape.type === 'rect') {
ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
} else if (shape.type === 'circle') {
ctx.beginPath();
ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
ctx.fill();
}
});
}
// 初始绘制
drawShapes();
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// 遍历图形，看哪个被点击了
for (let i = shapes.length - 1; i >= 0; i--) { // 从后往前遍历，确保点击到最上层的图形
const shape = shapes[i];
if (shape.type === 'rect' &&
mouseX > shape.x && mouseX < shape.x + shape.width &&
mouseY > shape.y && mouseY < shape.y + shape.height) {
isDragging = true;
draggedShape = shape;
startX = mouseX - shape.x; // 记录鼠标点击点与图形左上角的偏移
startY = mouseY - shape.y;
break; // 找到一个就退出
} else if (shape.type === 'circle') {
const distance = Math.sqrt(Math.pow(mouseX - shape.x, 2) + Math.pow(mouseY - shape.y, 2));
if (distance <= shape.radius) {
isDragging = true;
draggedShape = shape;
startX = mouseX - shape.x;
startY = mouseY - shape.y;
break;
}
}
}
});
canvas.addEventListener('mousemove', (e) => {
if (!isDragging || !draggedShape) return;
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
draggedShape.x = mouseX - startX;
draggedShape.y = mouseY - startY;
drawShapes(); // 每次移动都重新绘制
});
canvas.addEventListener('mouseup', () => {
isDragging = false;
draggedShape = null;
});
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// 这里可以再次遍历shapes，进行点击事件的命中检测
// 比如：console.log('Clicked on a shape!');
});这个过程，坦白说，比SVG直接监听元素事件要麻烦得多。你基本上是在canvas上“模拟”DOM事件。但是，这种低层级的控制也带来了极大的灵活性。你可以实现任何你想要的交互，比如复杂的图形选择、编辑手柄、甚至是自定义的绘图工具。虽然工作量大，但当你需要高性能、高度定制的图形交互时，这是值得付出的。
Canvas在性能优化方面有哪些常见策略和注意事项？
canvas的性能，尤其是当你做动画、游戏或者处理大量图形时，是需要特别关注的。我经常会遇到因为不注意性能，导致动画卡顿、内存飙升的问题。以下是一些我常用的优化策略和心得：
-
最小化绘制操作： 这是最核心的。每次调用
ctx.stroke()、ctx.fill()、ctx.drawImage()等都会消耗资源。-
避免不必要的重绘： 如果只有一小部分内容发生变化，尝试只清除并重绘那一小块区域，而不是整个画布。不过，对于复杂的场景，全屏
clearRect再重绘反而可能更简单、更快，因为浏览器对全屏清除有优化。 -
批量绘制： 比如画多条线，尽可能使用
beginPath()和closePath()包裹起来，一次性stroke()或fill()，而不是每画一条线就stroke()一次。 -
减少状态改变：
ctx.fillStyle、ctx.strokeStyle、ctx.lineWidth等属性的改变也会带来开销。尽量把使用相同样式、线宽的绘制操作放在一起。
-
避免不必要的重绘： 如果只有一小部分内容发生变化，尝试只清除并重绘那一小块区域，而不是整个画布。不过，对于复杂的场景，全屏
-
使用
requestAnimationFrame进行动画： 这是浏览器优化动画的最佳实践。它会告诉浏览器你希望执行一个动画，并让浏览器在下一次重绘之前调用你指定的更新函数。这能确保动画流畅，并避免在后台标签页运行时消耗资源。function animate() { // 更新图形位置或状态 // 重新绘制canvas requestAnimationFrame(animate); } requestAnimationFrame(animate); -
离屏Canvas（Offscreen Canvas）： 对于复杂但相对静态的背景，或者需要预渲染的精灵图（sprite），可以先在一个不可见的
canvas上绘制好，然后一次性将这个离屏canvas的内容绘制到可见canvas上。这能显著减少主线程的计算量。// 创建一个离屏canvas const offscreenCanvas = document.createElement('canvas'); offscreenCanvas.width = 200; offscreenCanvas.height = 200; const offscreenCtx = offscreenCanvas.getContext('2d'); // 在离屏canvas上绘制复杂内容 offscreenCtx.fillStyle = 'lightgray'; offscreenCtx.fillRect(0, 0, 200, 200); offscreenCtx.fillStyle = 'darkgreen'; offscreenCtx.arc(100, 100, 80, 0, Math.PI * 2); offscreenCtx.fill(); // 在主canvas上绘制离屏canvas的内容 ctx.drawImage(offscreenCanvas, 100, 100); 避免浮点数： 尽可能使用整数坐标进行绘制，或者使用
Math.floor()或Math.round()将坐标四舍五入。虽然现代浏览器对浮点数处理得很好，但在某些情况下，整数操作可以略微提高性能，尤其是在像素对齐和避免抗锯齿模糊方面。多层Canvas： 如果你的场景中有背景、前景和交互层，可以考虑使用多个透明的
canvas元素叠加在一起。这样，当只有前景或交互层发生变化时，你只需要重绘对应的canvas，而不需要重绘整个复杂场景。-
图片优化：
- 预加载图片： 在开始绘图前，确保所有图片都已加载完成。
-
使用
drawImage的正确姿势： 如果图片尺寸固定，避免频繁改变drawImage的源矩形或目标矩形参数，因为这可能导致内部优化失效。 -
Sprite Sheet（精灵图）： 将多个小图片合并成一张大图，通过
drawImage截取不同的部分来显示。这减少了HTTP请求，并能提高GPU的渲染效率。
合理使用
save()和restore()：save()和restore()是管理canvas状态（如变换、样式）的利器，但频繁调用它们也会有性能开销。只在必要时使用，并确保每次save()都有对应的restore()。浏览器开发者工具： 这是我调试性能问题时最依赖的工具。Chrome DevTools的"Performance"（性能）面板可以记录你的
canvas操作，显示
