Question

我有以下代码：

<canvas id='c' style='position:absolute; left:0px; top:0px;'>
</canvas>

<script>
var
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var flower = new Image();
flower.src = "http://plainicon.com/dboard/userprod/2803_dd580/prod_thumb/plainicon.com-46129-128px-af2.png"
flower.onload = function(){
ctx.drawImage(flower,0,0,128,128, 0, 0, 30, 30);
ctx.drawImage(flower,0,0,128,128, 0, 0, 218, 218);
</script>

短篇小说：正如你可以看到花朵没有很好地调整大小，它的质量也会丢失。

长篇故事：

我正在制作一个有形状的游戏。基本上，我使用的图像比例为128-128或80-80，因为它专为手机设计，我确保当我调整图像大小以保持1：1的比例。通过基于用户窗口的计算，我决定在画布全屏时按比例调整图像大小。它在某些屏幕上工作得体，但在一些屏幕上它并没有 - 图像可能会缩小太多，看起来很差或太高而且看起来不清楚。它在三角形图像上最引人注目（我知道我可以用画布绘制纯粹的形状，但我需要在它们上画面，所以这是不可能的）。做得好的好方法吗？

Answer 1

这是基于像素的图像的本质。

当缩小尺寸时，尽量保持图像尺寸的整体比例，这样可以提高质量。

例如，您有128，然后将其减少到30，这意味着像素减少了128/30 = 4.2666。像素是离散的信息单位，在不损失质量的情况下不能轻易切割成较小的单位。

如果您将尺寸更改为32像素128/32 = 4，则可以获得更好的质量，因为您没有切割任何像素。

对于升级，你几乎无能为力，它要么模糊，要么像素化。您的源图像应始终具有比您需要的更高的分辨率。经验法则是“仅缩小规模”。

如果按照整体比例缩小尺寸的图像质量不符合您的喜好，那么最好的选择是在photoshop（或类似设备）上进行缩放生产，然后让设备选择要下载的图像。这将为您提供所有设备的最佳质量，并为您和用户节省一些带宽（对于较小的分辨率设备）

调整画布上的图像大小

1 个答案: