离屏Canvas是什么？
在做网页动画或数据可视化时，你可能遇到过页面卡顿的问题。比如一个实时折线图每秒更新几十次，直接在主页面Canvas上绘制，浏览器压力很大。这时候，离屏Canvas（Offscreen Canvas）就能派上用场。
简单来说，离屏Canvas就是把绘图操作从主页面挪到后台进行。它不直接显示在页面上，而是作为一个“画布后备”，先在幕后完成复杂绘制，再把结果快速贴到页面上的可见Canvas里。
它和普通Canvas有什么不同？
传统Canvas的绘制发生在主线程，和DOM操作、JavaScript执行抢资源。一旦绘图任务重，用户滑动页面都可能变慢。而离屏Canvas可以配合Web Worker使用，把绘图逻辑放到独立线程中，主线程只负责最终展示，互不干扰。
想象你在做一份复杂的PPT动画，如果一边写内容一边播放预览，电脑很容易卡。但如果先在后台渲染好每一帧，再导入播放，就顺滑得多。离屏Canvas干的就是这个事。
怎么用离屏Canvas提升渲染效率？
下面是一个简单的例子，展示如何在Web Worker中使用离屏Canvas：
self.onmessage = function(e) {
const canvas = e.data.canvas;
const ctx = canvas.getContext('2d');
// 在Worker中绘制，不影响主线程
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
requestAnimationFrame(render);
}
render();
};在主页面中，将Canvas传给Worker：
const canvas = document.getElementById('myCanvas');
const worker = new Worker('worker.js');
worker.postMessage({ canvas: canvas }, [canvas]);注意postMessage时要把canvas作为可转让对象传递，这样它才能真正脱离主线程。
和HTML元素混合渲染的技巧
实际项目中，Canvas常和其他HTML元素共存，比如按钮、文字说明等。这时可以把Canvas当作“背景图层”处理，保持其高性能渲染，而交互控件仍用标准HTML实现。
例如做一个实时仪表盘，背景的动态图表用离屏Canvas绘制，上方的标题、单位、切换按钮还是用div、button这些熟悉的标签。两者通过CSS定位叠加，既保证了性能，又保留了HTML的语义化和易维护性。
这种“分层渲染”思路在游戏、数据大屏、在线设计工具中很常见。像Figma这类网页端设计软件，底层图形引擎就大量使用了类似技术来维持流畅拖拽体验。
兼容性与使用建议
目前主流现代浏览器都支持离屏Canvas，但老版本IE和部分移动端浏览器可能不支持。如果需要兼容，可以检测特性并降级到普通Canvas + requestIdleCallback的方案。
另外，并非所有场景都需要离屏Canvas。如果你只是画个静态图表或偶尔更新的图像，直接用普通Canvas完全够用。它的价值主要体现在高频更新、复杂计算、动画密集的场景中。
合理使用，能让用户在低配手机上也能顺畅查看动态图表，这才是技术服务于生活的体现。