用途:当栅格渲染是实际选择时使用本技能。Canvas2D 适合密集散点图、迷你图墙、热力图、流式轨迹、平铺时间线、可拖拽分析工作区等 SVG 或 DOM 开销成为瓶颈的视图。默认假设:即使绘制是即时模式,也应在应用状态中保留场景模型。
主要能力:支持数万到数百万标记、流畅平移缩放、持续更新、表格或 KPI 网格中大量重复微图表、同屏多图表实例、密集几何上的自定义点击/悬停/刷选/拖拽,以及分层绘制控制。
使用方式:为浏览器缩放和高 DPI 缩放后备存储,设置 CSS 尺寸与 canvas.width/height 为 cssSize * pixelRatio,用 globalThis.devicePixelRatio || 1,并用 ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0) 重置上下文。保持世界到屏幕变换显式。用分层画布分离静态背景、主标记、高亮和交互覆盖层。构建确定性命中测试(空间索引、颜色拾取缓冲、最近点搜索、Path2D 重放配合 isPointInPath()/isPointInStroke()、简单形状解析测试)。指针交互需归一化坐标、反转变换、使用 setPointerCapture() 并在 pointerup/pointercancel/lostpointercapture 清理。
混合架构:Canvas 负责批量标记,SVG 或 HTML 负责坐标轴、标签、图例、富提示、菜单、表单控件、键盘焦点和注释,共享比例与变换。
性能默认:批量绘制、预计算样式组、类型化数组、剔除屏外标记、视口无法分辨时抽稀聚合、OffscreenCanvas 与 worker、文本注释留在 HTML/SVG、大迷你图表格用共享画布或虚拟化。后备存储内存按 width * height * pixelRatio^2 * 4 * layerCount * instanceCount 计算。仅在反复调用 getImageData() 的画布上使用 getContext("2d", { willReadFrequently: true })。
限制:当图表小、静态、文本密集、注释密集、以无障碍为主或需要可编辑矢量导出时,优先 SVG/HTML 或声明式语法。需要 GPU 级粒子、自定义着色器、实例化、超大规模图或点层、3D 或地图叠加时,优先 WebGL 或 Three.js/WebGL 技能。Canvas 引入的交互、无障碍和维护成本需自行承担。移动端需明确触摸目标策略、指针捕获、拖拽替代、捏合缩放归属、DPR 上限和低带宽/陈旧数据行为。具体平台、收费与价格信息暂未提供。