canvas 实现局部刷新页面

canvas 实现局部刷新页面

参考：怎么实现局部刷新页面 - CSDN

1. 创建画布

const c = document.getElementById('myCanvas');
const context = c.getContext('2d');

2. 局部擦除

context.clearRect(x, y, width, height);

擦除指定矩形内的颜色。

3. 裁剪区域

context.clip();

确定绘制的裁剪区域，区域外的图形不能绘制。

4. 像素级局部刷新

const imgData = context.getImageData(x, y, width, height);
context.putImageData(imgData, x, y, width, height);

• getImageData()：复制画布上指定矩形的像素数据。
• putImageData()：将图像数据放回画布。

实际开发中 canvas 局部刷新通常有两种策略：

1. 整画布重绘：把需要保留的状态在 JS 中保存，每次重绘整个 canvas。性能较差但实现简单（适合内容不多）。
2. 分层 canvas：把静态背景画在一个 canvas 上、动态内容画在另一个 canvas 上；只清空 / 重绘动态层。

来源整理自：我的有道云笔记