使用 Canvas 绘制实时股票走势图的一个主要原因是其高性能和灵活性，特别是在处理大量数据点和频繁更新的场景中。虽然 Canvas 每次绘图都会重新刷新整个画布，但它的性能优势和灵活性使其在许多实时数据可视化场景中成为首选。以下是一些详细的原因和解释：
为什么使用 Canvas
1. 高性能
Canvas 直接操作像素，适合处理大量动态更新的图形。它的绘图操作是在一个单一的画布上进行的，这使得它在处理复杂图形和高频率更新时性能更高。
2. 灵活性
Canvas 提供了丰富的绘图 API，可以实现复杂的图形操作和效果。你可以自由地绘制各种形状、图像、文本和路径，并且可以对它们进行变换、裁剪和组合。
3. 控制力
Canvas 允许你完全控制每个像素的绘制，这使得你可以实现非常精细的图形操作和优化。例如，你可以使用离屏 Canvas 进行复杂图形的预渲染，然后将其绘制到主画布上，以提高性能。
4. 动画和交互
Canvas 非常适合实现动画和交互效果。你可以使用 requestAnimationFrame 方法来创建高效的动画循环，并且可以通过事件处理器来实现用户交互。
如何优化 Canvas 绘图性能
虽然 Canvas 每次绘图都会重新刷新整个画布，重绘整个画布可能会导致性能问题，特别是在复杂的动画或高频率更新的情况下。为了优化 Canvas 的性能，可以采取以下几种方法：
1. 使用 requestAnimationFrame
使用 requestAnimationFrame 方法来创建动画循环，而不是使用 setInterval 或 setTimeout。requestAnimationFrame 会在浏览器的重绘周期内调用回调函数，从而提供更平滑的动画效果和更高的性能。
详见：juejin.cn/post/744152…
function draw() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制图形
// ...
// 请求下一帧
requestAnimationFrame(draw);
}
// 启动动画循环
requestAnimationFrame(draw);
2. 使用离屏 Canvas
对于复杂的图形，可以使用离屏 Canvas 进行预渲染，然后将其绘制到主画布上。这样可以减少主画布的重绘次数，提高性能。
const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
// 在离屏 Canvas 上进行复杂的绘图操作
offscreenCtx.fillStyle = 'blue';
offscreenCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 将离屏 Canvas 的内容绘制到主 Canvas 上
ctx.drawImage(offscreenCanvas, 0, 0);
在这个示例中，我们创建了一个离屏 Canvas，并在其上进行复杂的绘图操作。然后，我们将离屏 Canvas 的内容绘制到主 Canvas 上。这样可以减少主 Canvas 的重绘次数，提高性能。
3. 减少重绘区域
只重绘需要更新的部分，而不是整个画布。通过计算需要更新的区域，然后只重绘该区域
function clearRect(ctx, x, y, width, height) {
ctx.clearRect(x, y, width, height);
}
function draw(ctx, x, y, width, height) {
// 只重绘需要更新的区域
clearRect(ctx, x, y, width, height);
ctx.fillStyle = 'red';
ctx.fillRect(x, y, width, height);
}
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 示例：只重绘 (50, 50) 到 (100, 100) 的区域
draw(ctx, 50, 50, 100, 100);
在这个示例中，我们定义了一个 clearRect 函数来清除指定区域，然后在 draw 函数中只重绘需要更新的部分，以显减少不必要的重绘操作。
4. 批量绘制
尽量将多个绘图操作合并为一个批量操作，而不是逐个绘制。这样可以减少绘图调用的开销，提高性能。
ctx.beginPath();
// 绘制多个图形
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.stroke();
5. 优化绘图操作
减少不必要的绘图操作，优化绘图算法。例如，避免重复绘制相同的内容，使用更高效的绘图方法。
function drawOptimized(ctx) {
ctx.save();
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);
ctx.restore();
}
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 优化绘图操作
drawOptimized(ctx);
在这个示例中，我们使用 save 和 restore 方法来保存和恢复 Canvas 的状态，避免不必要的状态更改。这种方法可以减少不必要的绘图操作，提高性能。
6. 使用图像缓存
缓存不变的图像，避免重复绘制。例如，可以将不变的图像绘制到离屏 Canvas 上，然后在需要时将其绘制到主 Canvas 上。
const imageCache = new Image();
imageCache.src = 'path/to/image.png';
imageCache.onload = () => {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 将缓存的图像绘制到主 Canvas 上
ctx.drawImage(imageCache, 0, 0);
};
在这个示例中，我们将不变的图像缓存到一个 Image 对象中，然后在需要时将其绘制到主 Canvas 上。这样可以避免重复绘制相同的内容，提高性能。
7. 分层绘制
将不同的绘图内容分层绘制，减少重绘的开销。例如，可以使用多个 Canvas 元素，每个 Canvas 负责绘制不同的内容。
<canvas id="backgroundCanvas" width="800" height="600"></canvas>
<canvas id="foregroundCanvas" width="800" height="600"></canvas>
const backgroundCanvas = document.getElementById('backgroundCanvas');
const backgroundCtx = backgroundCanvas.getContext('2d');
const foregroundCanvas = document.getElementById('foregroundCanvas');
const foregroundCtx = foregroundCanvas.getContext('2d');
// 在背景 Canvas 上绘制背景内容
backgroundCtx.fillStyle = 'lightblue';
backgroundCtx.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
// 在前景 Canvas 上绘制前景内容
foregroundCtx.fillStyle = 'red';
foregroundCtx.fillRect(50, 50, 100, 100);
在这个示例中，我们使用两个 Canvas 元素，一个用于绘制背景内容，另一个用于绘制前景内容。这样可以减少重绘的开销，提高性能。
实现股票实时走势图的示例
以下是一个使用 Canvas 实现股票实时走势图的示例，展示了如何优化绘图性能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock Real-time Chart</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="stockChart" width="800" height="400"></canvas>
<script>
const canvas = document.getElementById('stockChart');
const ctx = canvas.getContext('2d');
const data = [];
const maxDataPoints = 100;
function drawChart() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
for (let i = 0; i < data.length; i++) {
const x = (i / maxDataPoints) * canvas.width;
const y = canvas.height - (data[i] / 100) * canvas.height;
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'blue';
ctx.stroke();
}
function updateData(newPrice) {
if (data.length >= maxDataPoints) {
data.shift();
}
data.push(newPrice);
drawChart();
}
// 模拟实时数据更新
setInterval(() => {
const newPrice = Math.random() * 100;
updateData(newPrice);
}, 1000);
</script>
</body>
</html>
总结
虽然 Canvas 每次绘图都会重新刷新整个画布，但其高性能、灵活性和控制力使其在处理实时数据可视化时非常适合。通过使用 requestAnimationFrame、离屏 Canvas、减少重绘区域和批量绘制等优化技巧，可以显著提高 Canvas 的绘图性能和用户体验。
