Question

我正在针对不同的屏幕尺寸制作HTML5画布性能基准测试。为了在评分中带来最大的客观性，基准将具有固定大小的画布 - 即它不会缩小或适合屏幕尺寸。我认为这应该保持这样，因为在小画面上用小帆布进行测试是对大型画布的不公平比较。

尽管如此，我在屏幕上看到的小于画布的尺寸，画布没有完全渲染，我相信这会影响最终得分。此外，我不希望用户点击两次以适应画布，因为处理用户事件也会影响分数。

如何确保小于画布大小的屏幕始终缩小以完全适合画布？这可能吗？

Answer 1

您可以尝试使用元查询强制屏幕大小，并禁用缩放。将320交换到任何画布宽度。

<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0" />

不过，我不知道这会对小于所需宽度的屏幕有何反应。

Answer 2

我制作了Fiddle可能会帮助您调整问题的大小。

代码的要点是你设置画布宽度和高度（你的画布分辨率！）一次，并使用css放置画布的区域自动调整大小以适应你配置的方式。

这是代码。但不要忘记看到它in action。

HTML：

<body scroll="no" style="overflow: hidden">
    <div id="gameArea">
      <canvas id="gameCanvas" />
    </div>
</body>

CSS：

#gameArea {
  position: absolute;
  left: 50%;
  top: 50%;
}
#gameCanvas {
  width: 100%;
  height: 100%;
}

使用Javascript：

(function (limit_canvas_size, stretch_to_fit) {

var canvas = document.getElementById('gameCanvas');
var game_area = document.getElementById('gameArea');

// try with different resolutions !
canvas.width = 600;
canvas.height = 600;

var aspect_ratio = canvas.width / canvas.height;

var context = canvas.getContext('2d');

function draw() {
    context.save();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "red";
    context.fillRect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
    context.restore();
}

function resize() {
    // start with canvas original aspect ratio
    var widthToHeight = aspect_ratio;
    var newWidthToHeight = aspect_ratio;

    // cache the window dimensions
    var newWidth = window.innerWidth,
        newHeight = window.innerHeight;

    if (limit_canvas_size) {
        // fit smaller screen entirely but maintain the resolution on bigger screens
        newWidth = newWidth <= canvas.width ? newWidth : canvas.width;
        newHeight = newHeight <= canvas.height ? newHeight : canvas.height;
        // this will be the visual aspect ratio
        newWidthToHeight = newWidth / newHeight;
    }

    if (stretch_to_fit) {
        // overwrite the current canvas aspect ratio to fit the entire screen
        widthToHeight = window.innerWidth / window.innerHeight;
    }

    // special case (only fit the screen if window is smaller than resolution)
    if (stretch_to_fit && limit_canvas_size) {
        newWidth = canvas.width;
        newHeight = canvas.height;
        newWidth = window.innerWidth <= newWidth ? window.innerWidth : newWidth;
        newHeight = window.innerHeight <= newHeight ? window.innerHeight : newHeight;
        // this will be the visual aspect ratio
        widthToHeight = newWidth / newHeight;
    }
    else {        
        // this will be the visual aspect ratio 
        newWidthToHeight = newWidth / newHeight;
    }

    // scale the game area using CSS        
    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        game_area.style.height = newHeight + 'px';
        game_area.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        game_area.style.width = newWidth + 'px';
        game_area.style.height = newHeight + 'px';
    }

    // adjust the game area position
    game_area.style.marginTop = (-newHeight / 2) + 'px';
    game_area.style.marginLeft = (-newWidth / 2) + 'px';

};

// listen to resize events
window.addEventListener('resize', function () {
    resize();        
}, false);

// also resize the screen on orientation changes
window.addEventListener('orientationchange', function () {
    resize();        
}, false);

// draw something in the canvas
// note that you dont need to redraw on resize since the canvas element stays intact    
draw();

// first resize
resize();

})(false, false); // setup 3

您可以设置上面的代码，如下所示：

调整画布大小以适合所有屏幕尺寸的整个屏幕：
将匿名函数参数更改为（false，true）。这将使limit_canvas_size = false, stretch_to_fit = true
调整画布大小以适合屏幕，但保持所有屏幕尺寸的画布宽高比：
将匿名函数参数更改为（false，false）。这将使limit_canvas_size = false, stretch_to_fit = false
调整画布大小以适合小屏幕尺寸的屏幕，但保持宽高比：
将匿名函数参数更改为（true，false）。这将使limit_canvas_size = true, stretch_to_fit = false
仅在小屏幕中调整画布大小以适合整个屏幕：
将匿名函数参数更改为（true，true）。这将使limit_canvas_size = true, stretch_to_fit = true

因此，根据您的具体情况，您应该使用设置3或4;

缩小以完全适合画布的尺寸（在iPhone，Android等上）

2 个答案: