问题描述
我提出针对不同屏幕尺寸的HTML5画布性能基准。使在得分最大客观性，在其上基准将是具有固定大小的画布 - 即它不会收缩或配合以匹配的屏幕尺寸。我认为，这应该继续这样做，是因为测试在小屏幕上的小帆布反对一个大的不公平的比较。
I am making an HTML5 canvas performance benchmark for different screen sizes. To bring maximal objectivity in scoring, the canvas on which the benchmark will be with a fixed size - i.e. it will not shrink or fit to match the screen size. I believe that this should remain so, because testing on a small screen with a small canvas is an unfair comparison against a large one.
不过，我看到在屏幕上，比画布的大小，画布没有完全呈现，而且我相信，这将影响最终的比分。另外，我不希望用户敲击两次以适合在画布上，因为在处理用户事件也会影响得分。
Nevertheless, I saw that on screens, smaller than the size of the canvas, the canvas is not rendered fully, and I believe this will affect the end score. Also, I do not want the users to tap twice to fit the canvas, because handling the user event will also affect the score.
我怎样才能确保屏幕较小的则画布大小总是缩小以适合整个画布？这可能吗？
How can I make sure that screens smaller then the size of the canvas ALWAYS zoom out to fit the canvas entirely? Is this possible?
推荐答案
我做了一个小提琴了可以帮助你并调整其大小的问题。
I made a Fiddle that might help you with resize problems.
在code的主要问题是，你设置画布宽度和高度（你的屏幕的分辨率！）一次，而使用CSS的地方你的画布被放置在区域自动调整以适应屏幕的配置方式
The main point of the code is that you set the canvas width and height (your canvas resolution!) once, and using css the area where your canvas is placed resizes automatically to fit the screen in the way you configure.
下面是code。但不要忘了，看看它 行动的
Here is the code. But don't forget to see it 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：
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
您可以设置如下图所示上述code：
You can setup the above code as shown next:
调整画布大小，以适应整个屏幕在所有屏幕尺寸：结果更改匿名函数参数（假，真）。这将使搜索 limit_canvas_size =假，stretch_to_fit = TRUE
调整画布大小，以适应屏幕而保持所有屏幕尺寸画布长宽比：结果更改匿名函数参数（假的，假的）。这将使搜索 limit_canvas_size =假，stretch_to_fit = FALSE
Resize canvas to fit the screen but maintain the canvas aspect ratio in all screen sizes:
Change the anonymous function parameters to (false, false). This will make limit_canvas_size = false, stretch_to_fit = false
调整画布大小以适应小屏幕尺寸的屏幕，但只维持纵横比：结果更改匿名函数参数（真，假）。这将使搜索 limit_canvas_size = TRUE，stretch_to_fit = FALSE
Resize canvas to fit the screen in small screen sizes only but maintain the aspect ratio:
Change the anonymous function parameters to (true, false). This will make limit_canvas_size = true, stretch_to_fit = false
调整画布大小以适合只有小屏幕的整个屏幕：结果更改匿名函数参数（真实的，真实的）。这将使搜索 limit_canvas_size = TRUE，stretch_to_fit =真
Resize canvas to fit the entire screen in small screens only:
Change the anonymous function parameters to (true, true). This will make limit_canvas_size = true, stretch_to_fit = true
所以，您的具体情况，应使用安装3或4;
So to your specific case you should use setup 3 or 4;