Canvas 的显示尺寸必须通过 HTML 的 width/height 属性（而非仅 CSS）设定，否则绘图缓冲区仍为默认 300×150 像素，导致 drawImage() 缩放失真、坐标错位和图像模糊。
canvas 的显示尺寸必须通过 html 的 `width`/`height` 属性（而非仅 css）设定，否则绘图缓冲区仍为默认 300×150 像素，导致 `drawimage()` 缩放失真、坐标错位和图像模糊。
在 HTML5 Canvas 开发中，一个高频却极易被忽视的核心原则是：Canvas 的逻辑分辨率（即绘图缓冲区大小）与视觉显示尺寸必须明确区分。你提供的代码中 <canvas id="canvas" style="width: 1200px; height: 500px;"></canvas> 仅设置了 CSS 样式尺寸，而未声明 HTML width 和 height 属性——这意味着浏览器底层仍使用默认的 300×150 像素缓冲区。当你调用 ctx.drawImage(image, 0, 0, 400, 200) 时，Canvas 实际试图将图像缩放到 相对于 300×150 缓冲区 的 400×200 像素区域，但该区域已超出缓冲区边界，最终由浏览器强制拉伸渲染，造成模糊、变形甚至裁剪异常。
✅ 正确做法是：始终优先通过 HTML 属性或 JavaScript 显式设置 canvas.width 和 canvas.height，以定义真实的位图分辨率：
<!-- 推荐：直接在 HTML 中声明整数像素值 --> <canvas id="canvas" width="1200" height="500"></canvas>
或动态设置（注意：赋值会清空画布）：
const canvas = document.getElementById('canvas');
canvas.width = 1200; // ✅ 设置缓冲区宽度（像素）
canvas.height = 500; // ✅ 设置缓冲区高度（像素）
const ctx = canvas.getContext('2d');
此时再执行你的图片绘制逻辑，drawImage(image, 0, 0, 400, 200) 将严格按 400×200 像素在 1200×500 的高清缓冲区中精准缩放绘制，边缘锐利、坐标准确。
⚠️ 补充关键细节：
- 若需响应式布局（如填满父容器），可同时使用 HTML 属性 + CSS 缩放：
<canvas id="canvas" width="1200" height="500" style="width: 100%; height: 100%; display: block;"></canvas>
此时浏览器会对 1200×500 的原始位图进行高质量 CSS 缩放，远优于仅靠 CSS 拉伸默认 300×150 缓冲区。
- 在高 DPI 设备（如 Retina 屏）上，建议结合
window.devicePixelRatio进行设备像素适配，避免模糊：const dpr = window.devicePixelRatio || 1; canvas.width = 1200 * dpr; canvas.height = 500 * dpr; ctx.scale(dpr, dpr); // 保持 CSS 尺寸不变，仅提升绘制精度
总结：Canvas 绘图质量的根基在于缓冲区尺寸的精确控制。永远记住——<canvas width="W" height="H"></canvas> 定义的是“能画多少像素”，而 style="width: Wpx; height: Hpx" 仅决定“它在页面上占多大空间”。二者协同，方得清晰、可控、高性能的图形渲染。
