Canvas 在高分屏上发虚，怎样核对 CSS 尺寸与绘图缓冲尺寸

将 Canvas 的 CSS 显示尺寸与绘图缓冲尺寸分别设置，再按实际 devicePixelRatio 建立绘图尺度。只把 CSS 宽度放大不会增加位图像素，修改图片 DPI 标签也不会替网页画布自动补清晰度。

先写两个独立尺寸

本例画布在页面中始终占320×160个CSS像素。DPR为1时位图320×160，为2时位图640×320，绘图坐标仍按320×160使用。程序通过CDP模拟两个设备比例，读取真实devicePixelRatio与元素矩形，不把一张手写换算表当浏览器结果。模拟比例不代表当前物理显示器密度已被测量。

尺寸重设后再建立变换

设置canvas.width与height会重置上下文，因此应先计算并赋位图尺寸，再设置缩放并重新画内容。若每次resize都在旧变换上继续scale，可能越缩越大；可使用明确的setTransform建立本轮尺度。DPR不一定是整数，实际项目需约定取整和CSS尺寸来源，不能把本例1与2的整数关系推广成所有缩放设置。

用像素验证覆盖范围

夹具按逻辑尺寸填满红色，脚本读取位图右下角像素应为不透明红，证明绘制覆盖了实际缓冲。它验证尺寸与尺度一致，不测文字锐度、色彩管理或抗锯齿观感。若右下角透明，可能只画了逻辑宽高却忘记调整绘图尺度；若页面尺寸变大，则检查是否将位图宽高误当CSS宽高直接用。

清晰度和资源预算一起决定

DPR翻倍会让宽和高各翻倍，像素总量变成四倍，后续读取和重绘成本也可能上升。目标互动大屏应结合真实分辨率、内存和帧率测量决定是否限制渲染比例。这里没有比较GPU性能，也没有读取TUIO坐标；鼠标事件仍是CSS参考系，若需要把输入落到位图像素，还要按画布矩形与缓冲尺寸明确转换。

把比例变化视为需要重建的输入

窗口跨屏、系统缩放或浏览器缩放可能改变实际比例，项目应在适当生命周期重新读取，并只在必要时重设缓冲。若把DPR在启动时缓存后永久使用，迁移到另一块屏时可能继续模糊；若每帧都重设width，则又会丢失绘图状态。尺寸检查与内容重画应成一套流程，同时保留当前逻辑尺寸、位图尺寸和实际比例三项，方便复核清晰度来自哪一级。

下载并复现

下载原创HTML夹具、独立验证程序、本次执行记录和依赖与运行说明，放在同一目录。安装Playwright 1.58.0及其Chromium后运行 python verify.py；程序使用两个随机本地端口，自动关闭浏览器与服务，不请求外网或业务接口。

本次实际环境为Python 3.12.4、Playwright 1.58.0、Chromium 145.0.7632.6。CDP设备比例模拟与Canvas2D像素读取；非实体显示器测量。断言已通过；完整事件和数值保留在执行记录，不能把它改名后当目标展项测量。

Canvas题限定2D上下文，WebGL题限定WebGL1；启动使用ANGLE SwiftShader软件后端参数，实际renderer可见对应执行记录。软件后端的像素结果不代表实体显卡性能、驱动稳定性或跨浏览器一致性。

继续核查与一级出处

基础背景见把图片改成300DPI为何仍不清楚，怎样核对像素与物理尺寸。位图尺寸调整会重置2D状态，尺寸与重绘应一起处理，可继续用Canvas 改完 width 后颜色和变换都丢了，怎样验证上下文重置取证；相关工程入口在专题与产品对接说明。

• canvas位图width/height与CSS显示尺寸相互独立：2026-10-24已联网读取一级来源；WHATWG HTML Living Standard，读取页标记2026-10-22更新。