Canvas画出来的图形为什么模糊不清？

锦锦 Dev 提问于 2026-03-25 16:39:20 阅读 37

前端

我在用Canvas画一个简单的矩形，但显示出来特别模糊，边缘都是毛的。明明代码看起来没问题啊：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
ctx.fillRect(50, 50, 100, 100);

是不是我漏了什么设置？还是Canvas默认就是糊的？

我来解答赞 6 收藏

反馈

1 条解答

设计师振杰 Lv1

这问题我遇到过不少次，其实主要是跟Canvas的分辨率设置有关。默认情况下，Canvas会按照设备的像素比来渲染，如果你没特别设置，很可能在高分辨率屏幕上就会显得模糊。

建议改成这样：

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');



function resizeCanvas() {

    const dpr = window.devicePixelRatio || 1;

    canvas.width = 400 * dpr;

    canvas.height = 300 * dpr;

    canvas.style.width = '400px';

    canvas.style.height = '300px';

    ctx.scale(dpr, dpr);

}



resizeCanvas();

ctx.fillRect(50, 50, 100, 100);



window.addEventListener('resize', resizeCanvas);

这里关键就是根据设备像素比调整Canvas的实际宽高，同时保持显示尺寸不变。记得用 ctx.scale 来同步缩放绘图。这样画出来的图形就会清晰多了。

顺便说下，这个方法也适用于其他Canvas绘制场景，写多了就觉得挺顺手的，虽然有点麻烦但确实有效。

2026-03-25 20:07