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

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

首先，画布尺寸有两个主要参数：

-Canvas Pixel Count。通过canvas.width = 1000

设置

-Canvas Display像素大小。通过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上应用缩放。

如何使用缩放比例在合理的范围内缩放画布？

1 个答案: