如何使用缩放比例合理地缩放我的画布？答案

【问题标题】：How to scale my canvas in reason, with the zoom scale?如何使用缩放比例合理地缩放我的画布？
【发布时间】：2016-09-26 22:48:56
【问题描述】：

我正在使用 JavaScript 开发一个多网页游戏。我的画布当前设置为屏幕的宽度和高度。

html
<canvas id = "canvas"></canvas>

javascript
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
//Making canvas scale;
c.width = window.innerWidth;
c.height = window.innerHeight;

    function resize(){
 //Add some code
   }

我的问题是，我不希望我的玩家缩小，默认情况下也不是。它会让游戏看起来很糟糕，并让玩家比其他人更有优势。所以我需要在 resize 方法中添加一些代码，无论比例如何，画布都不会被缩小。如果最终结果在 300%+ 时有些模糊，那很好。

重要提示：resize 功能无法移除画布或将画布重置为默认值。

【问题讨论】：

w3schools.com/tags/canvas_scale.asp
我怎么知道缩放级别是多少？这篇文章是我仅有的一篇，有点过时了：stackoverflow.com/questions/1713771/…。是否有任何构建在 Javascript 中的方法而不是跨浏览器工作
几乎不可能跨浏览器检测缩放比例，除非有人能纠正我。
如果我不知道缩放，是否有另一种聪明的方法可以让我获得缩放画布的因素。
不要使用动态画布大小，而是将其设为静态，并使用我链接的函数对其进行缩放。如果你想要它全屏，ctx.scale(window.innerWidth/staticCanvasWidth, window.innerHeight/staticCanvasHeight); 其中staticCanvasWidth 和staticCanvasHeight 是你刚刚设置的画布的静态宽度/高度

标签： javascript canvas html5-canvas

【解决方案1】：

有多种方法可以缩放画布。

首先，画布大小有两个主要参数：

-画布像素数。通过canvas.width = 1000设置

-画布显示像素大小。通过canvas.style.width = '1000px'设置

如果您希望所有玩家看到一个 1000x1000 区域但全屏显示：

canvas.width = 1000; 
canvas.height = 1000; 
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';

canvas.style.transform = 'scale(2,2)' 还有另一个选项。

此方法最接近通过Ctrl+ 或Ctrl- 完成的浏览器缩放。

transform 的最大优势在于缩放适用于所有 DOM 子元素。如果您的游戏使用 HTML 作为其界面，那么这就是要走的路。（通过在包含画布+ HTML 界面的div 上应用缩放。

【讨论】：

快速跟进问题。似乎正方形被拉伸以形成矩形。如果我想使用这种方法保留一个正方形，我应该怎么做？我的 draw Rect 具有相同的长度和宽度参数，但显示为矩形。
如果预缩放的画布没有与窗口相同的宽高比，那么显然会有拉伸。您可以更改画布的比例以匹配窗口比例。但在这种情况下，一些玩家会看到比其他玩家更多的内容。另一种选择是尽可能放大，同时尊重类似于在 16:9 屏幕上观看 4:3 电影的比例。但这意味着您将有黑色边框。
谢谢！通过潜水“window.innerHeight / window.innerWidth”并将其乘以 x 值，我能够解决这个问题。感谢所有的帮助。