如何合理地使用縮放比例縮放畫布？

Question

我正在使用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％+時有些模糊，那很好。

重要說明：調整大小功能無法刪除畫布或將其重置為默認值。

Answer 1

有多種縮放畫布的方法。

首先，畫布大小有2個主要參數：

-畫布像素數。 通過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上應用縮放比例。