阶段 1 · 起步入门16 分钟
Canvas 配置：让 GPU 输出进入页面
GPUCanvasContext、首选格式与交换纹理
取得 webgpu 上下文，使用首选画布格式配置，并把一个清屏命令提交到当前交换纹理。
LEARNING GOALS
先明确本课目标
1
配置 GPUCanvasContext
2
理解设备像素比与画布分辨率
3
认识当前交换纹理的生命周期
MENTAL MODEL · 再建立心智模型
Canvas 不是永久纹理仓库，而是每帧借给你的“当前展示纹理”；getCurrentTexture() 的结果只属于当前帧。
MINIMAL EXAMPLE
Canvas 为什么需要显式配置？
GPUCanvasContext 是 Canvas 与 GPUDevice 之间的展示通道。configure() 固定设备、像素格式和 alpha 规则；之后每帧用 getCurrentTexture() 取得当帧展示纹理。
javascriptconst context = canvas.getContext('webgpu');
const format = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format, alphaMode: 'opaque' });
const frameTexture = context.getCurrentTexture();- format 要一致 Canvas format 必须与 RenderPipeline 的 color target format 一致。
- 纹理属于当前帧 getCurrentTexture() 的返回值不应缓存到下一帧继续使用。
- 尺寸是像素数 canvas.width/height 决定实际渲染分辨率，CSS 尺寸只决定页面布局。
配置后，Render Pass 才能把颜色附件指向当前交换纹理并显示到页面。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
画布GPUCanvasContextCanvas 的 WebGPU 上下文，用 configure 关联 Device 与格式，每帧通过 getCurrentTexture 取得展示纹理。画布Preferred Canvas Formatnavigator.gpu.getPreferredCanvasFormat() 返回当前平台显示效率较好的标准画布格式。画布Current Texture由 GPUCanvasContext 每帧提供的当前交换纹理，只在当帧有效，不应跨帧缓存。渲染目标Render AttachmentRender Pass 写入的颜色、深度或模板视图。画布configureGPUCanvasContext 的配置方法，用 Device、颜色格式和 alphaMode 建立 Canvas 展示通道。画布devicePixelRatioCSS 像素与设备物理像素的比例；高 DPI Canvas 通常据此放大实际渲染尺寸。画布Canvas页面中承载位图绘制结果的矩形表面；CSS 尺寸决定布局大小，width/height 像素尺寸决定实际渲染分辨率。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
监听 ResizeObserver，在容器尺寸变化时自动调整画布并重绘。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
CSS 尺寸与像素尺寸
Canvas 的 CSS 宽高决定页面布局，canvas.width/height 决定实际渲染分辨率。高 DPI 屏幕通常要乘 devicePixelRatio。
配置项必须与管线一致
Canvas format 会成为渲染管线 color target 的格式；格式不匹配会触发验证错误。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
两者都把 GPU 输出送入 Canvas，但 WebGPU 要显式配置 Device 与像素格式。
WebGL
Context 创建时就与 Canvas 关联，drawingBufferWidth/Height 是实际绘制尺寸。
WebGPU
GPUCanvasContext 需要 configure，并在每帧取得新的 current texture。
WebGPU 的 current texture 只属于当前帧，不能像 WebGL 默认 framebuffer 那样被当成长期对象。