canvas全屏需同步设置js的width/height属性与css样式，否则会模糊或坐标偏移；必须用window.innerwidth/height×dpr设置物理像素尺寸，css设100vw/vh并ctx.scale(dpr,dpr)，同时监听resize和orientationchange事件。
canvas 全屏需要同时控制 CSS 和 JS 两个层面
只设 width 和 height 属性或仅用 CSS 拉伸，会导致图像模糊、比例错乱或事件坐标偏移。真正全屏必须同步设置 canvas 的 width/height 属性（非 CSS 样式）为当前视口尺寸，并用 CSS 确保它铺满整个 viewport。
用 window.innerWidth 和 window.innerHeight 动态设置 canvas 尺寸
canvas 的 width 和 height 属性决定其内部绘图坐标系的分辨率，必须用 JS 赋值，不能靠 CSS 宽高替代。
- 直接写
canvas.width = window.innerWidth和canvas.height = window.innerHeight - 必须在页面加载后执行，且监听
resize事件以响应窗口缩放 - 注意：移动端需考虑
devicePixelRatio，否则在高清屏上会模糊——可按比例放大 canvas 像素尺寸，再用 CSS 缩放回视口大小
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<p>function resizeCanvas() {
const dpr = window.devicePixelRatio || 1;
canvas.width = window.innerWidth <em> dpr;
canvas.height = window.innerHeight </em> dpr;
canvas.style.width = '100vw';
canvas.style.height = '100vh';
ctx.scale(dpr, dpr); // 保持绘图逻辑坐标不变
}</p><p>resizeCanvas();
window.addEventListener('resize', resizeCanvas);</p>
CSS 必须禁用默认 margin 并覆盖所有布局干扰
常见错误是 canvas 被 body 默认 margin 或其他父容器 padding/overflow 挤压，导致无法真·全屏。
- 给
html,body设置margin: 0; padding: 0; height: 100% - canvas 的 CSS 必须含
display: block（避免底部留白）和position: absolute或fixed（绕过文档流干扰） - 不推荐用
width: 100%; height: 100%，而应统一用width: 100vw; height: 100vh，更可靠
移动端 Safari 的 resize 事件不可靠，需补充 orientationchange
iOS Safari 在横竖屏切换时可能不触发 resize，导致 canvas 尺寸卡在旧值。
- 加监听
orientationchange事件，调用同一份resizeCanvas() - 部分安卓 WebView 对
devicePixelRatio切换响应滞后，可在setTimeout中延迟重设一次 - 若使用
vh单位，在 iOS 地址栏收起/展开时会触发视口高度突变，此时仅靠resize不够，建议结合scroll或visualViewportAPI（较新）做兜底
canvas 全屏真正的难点不在“怎么填满”，而在“填满之后坐标是否准、像素是否清、旋转后是否跟得上”。尤其混合了 touch 交互或 requestAnimationFrame 动画时，漏掉 devicePixelRatio 或没重置 ctx.transform，就容易出现点击偏移或动画撕裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
