Question

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

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

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

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

如何在没有这种模糊的情况下缩小我对画布绘制的内容？

Answer 1

如果您要使用CSS重新缩放画布，那么确保您始终按比例缩放，否则您将看到失真。即便如此，如果尺寸发生显着变化，您仍可能会看到一些小的失真。

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

如果您的图像会大幅缩小，如果您使用媒体查询为每种设备尺寸提供适当大小的图像（移动设备的小图像，平板电脑的中等图像和桌面设备的大图像），则效果最佳。如果您无法提供尺寸合适的图片，请务必查看以下有关如何通过逐步缩小原始图片来获取不明显结果的优秀Stackoverflow答案：Html5 canvas drawImage: how to apply antialiasing

缩小HTML Canvas时的轻微模糊

1 个答案: