1

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

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

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

4

2 回答 2

0

我做了一个Fiddle可以帮助你解决调整大小的问题。

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

这是代码。但不要忘记看到它的实际效果。

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

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

  1. 调整画布大小以适应所有屏幕尺寸的整个屏幕：
    将匿名函数参数更改为 (false, true)。这将使
    limit_canvas_size = false, stretch_to_fit = true

  2. 调整画布大小以适应屏幕，但在所有屏幕尺寸下保持画布纵横比：
    将匿名函数参数更改为 (false, false)。这将使
    limit_canvas_size = false, stretch_to_fit = false

  3. 调整画布大小以仅适合小屏幕尺寸的屏幕，但保持纵横比：
    将匿名函数参数更改为 (true, false)。这将使
    limit_canvas_size = true, stretch_to_fit = false

  4. 调整画布大小以仅在小屏幕中适合整个屏幕：
    将匿名函数参数更改为 (true, true)。这将使
    limit_canvas_size = true, stretch_to_fit = true

因此，对于您的具体情况，您应该使用设置 3 或 4；

于 2013-05-03T22:26:17.830 回答
0

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

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

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

于 2013-04-30T13:06:10.927 回答