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

Question

我有一个画布，里面有一个图像。假设它的宽度为 800px，高度为 520px。我应该如何根据浏览器的高度和宽度缩放画布绘制的图像，以便我可以在任何浏览器大小下看到正确的图像？

谢谢

Answer 1

还没有测试过这个，但你可以像安卓开发指定其分辨率处理一样做。假设您的参考分辨率（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 值之间的相对比率的平均值。还要确保在调整客户端窗口大小时刷新画布，尽管浏览器应该自己处理这个问题（它会重绘）。