缩放HTML画布时轻微模糊

Slight blur when scaling down HTML Canvas

本文关键字：轻微 模糊 布时 HTML 缩放      更新时间：2023-09-26

我有一个画布，我想最大400px x 400px。当我缩小画布(例如移动设备)时，我注意到我绘制的任何文本或图像都有非常轻微的模糊。

。在我创建的jsfiddle中调整结果窗口的大小，并仔细查看文本:http://jsfiddle.net/6xjz70d5/13/

我用来调整画布大小的代码是:

function resize(){
    width = window.innerWidth;
    if(width<=400){
        canvas.style.width = width+'px';
        canvas.style.height = width+'px';
    }
}

我如何在画布上缩小我画的东西而不产生模糊?

如果你要用CSS重新缩放画布，那么确保你总是按比例缩放，否则你会看到失真。即便如此，如果尺寸发生巨大变化，您可能仍然会看到一些小的失真。

一个更好的技术是监听window.onresize事件，并在画布上重新绘制缩放后的图像和缩放后的文本。

如果你的图像要大幅缩小，最好的结果是你使用媒体查询，为每个设备尺寸提供适当大小的图像(移动设备的小图像，平板电脑的中图像)。大的桌面)。如果你只是不能提供适当大小的图像，一定要检查这个伟大的Stackoverflow关于如何通过逐步缩小原始图像来获得清晰的结果:Html5 canvas drawImage:如何应用抗锯齿

相关文章：