Question

我有一个画布，里面有一个图像。让我们说它宽800像素，高520像素。我应该如何根据浏览器的高度和宽度缩放画布绘制的图像，这样我可以看到任何浏览器尺寸的图像都正确？

由于

Answer 1

没有测试过这个，但你可以这样做，就像android开发指定它的分辨率处理。假设您的参考分辨率（1x修改）为1920x1080，并且您具有该尺寸的固定分辨率（您提到800x520）。然后，您可以将这些值与其他分辨率的修改因子相乘：

<canvas id="myCanvas"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = 0; //x coordinate of the picture
  var y = 0; //y coordinate of the picture
  var screenWidth = window.innerWidth || document.body.clientWidth;
  var screenHeight = window.innerHeight || document.body.clientHeight;
  var multiplication = ((screenWidth / 1920) + (screenHeight / 1080)) / 2;
  var width = 800 * multiplication;
  var height = 520 * multiplication;
  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, x, y, width, height);
  };
  imageObj.src = '[your source here]';
</script>

这里的缺陷是窗口大小不具有相同的宽高比（16：9）。如您所见，乘法因子取宽度与1920值和高度以及1080值之间的相对比率的平均值。还要确保在客户端窗口调整大小时刷新画布，尽管浏览器应该自己处理它（它将重绘）。

根据浏览器的宽度和高度在画布内缩放图像

1 个答案: