我有以下代码:
https://jsfiddle.net/8o3sn9mh/17/
<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 的比例。通过基于用户窗口的计算，由于 Canvas 处于全屏状态，我决定按比例调整图像的大小。它在某些屏幕上工作得很好，但在某些屏幕上却不行——图像可能会缩小太多而看起来很差，或者放大太多而看起来不清楚。它在三 Angular 形图像上最为明显(我知道我可以用 Canvas 绘制纯形状，但我需要在它们上面画脸所以这是不可能的)。有什么好的方法可以做好吗？
最佳答案
这就是基于像素的图像的本质。
缩小比例时尽量保持图像尺寸的完整比例，这将提高质量。
例如，您有 128，然后将其减少为 30，这意味着像素减少了 128/30 = 4.2666。像素是离散的信息单元，在不损失质量的情况下不能轻易地切割成更小的单元。
如果您将大小更改为 32 像素 128/32 = 4，您将获得更好的质量，因为您没有切割任何像素。
对于放大，您几乎无能为力，要么模糊，要么像素化。您的源图像应始终具有比您需要的分辨率更高的分辨率。经验法则是“只能缩小规模”。
如果按整个比例缩小的图像质量不符合您的喜好，那么最好的选择是在生产中使用 photoshop(或类似工具)进行缩放，然后让设备选择要下载的图像。这将为您提供所有设备的最佳质量，并为您和用户节省一些带宽(对于较小分辨率的设备)
关于javascript - 在 Canvas 上调整图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41019272/