小屏幕设备下HTML Canvas绘制图片画质偏低问题该如何解决？

核心原因 #

模糊问题本质是设备像素比（DPR，window.devicePixelRatio）不匹配导致的：

• PC端屏幕DPR大多为1，画布尺寸和CSS显示尺寸一致，绘制效果清晰
• 移动端屏幕DPR普遍为2~3，你当前只设置了canvas的CSS显示尺寸，没有同步放大canvas的实际画布分辨率，绘制的内容被系统拉伸放大后就会出现模糊

具体修复步骤 #

• 第一步：计算当前设备的DPR值，同时获取canvas需要显示的逻辑宽高（你原本给canvas设置的CSS宽高值）
• 第二步：将canvas标签的width/height属性（实际画布分辨率）设置为「逻辑宽高 × DPR」
• 第三步：对canvas的2D上下文执行scale(dpr, dpr)缩放操作，后续你原有绘制逻辑的坐标、尺寸参数不需要改动，直接沿用即可

代码示例 #

const canvas = document.querySelector('your-canvas-selector')
const ctx = canvas.getContext('2d')
// 设定canvas的逻辑显示尺寸（单位CSS像素）
const displayWidth = 1000 // 替换为你实际需要的显示宽度
const displayHeight = 1000 // 替换为你实际需要的显示高度
// 获取设备像素比，最低取1避免异常
const dpr = window.devicePixelRatio || 1

// 设置实际画布分辨率
canvas.width = displayWidth * dpr
canvas.height = displayHeight * dpr
// 设置CSS显示尺寸
canvas.style.width = `${displayWidth}px`
canvas.style.height = `${displayHeight}px`

// 缩放上下文，适配DPR
ctx.scale(dpr, dpr)

// 原有绘制逻辑不需要修改，直接执行即可
ctx.drawImage(img, myOptions.x, myOptions.y, myOptions.sw, myOptions.sh)

额外优化建议 #

如果你的网站是像素风格（和原版百万美元主页一致），可以关闭canvas的图像平滑优化，避免像素块被模糊处理：

ctx.imageSmoothingEnabled = false
// 兼容不同浏览器前缀
ctx.webkitImageSmoothingEnabled = false
ctx.msImageSmoothingEnabled = false
ctx.mozImageSmoothingEnabled = false

内容的提问来源于stack exchange，提问作者Python Master