HTML5 Mobile Game CSS

-1

<!doctype html> 
<html> 
    <head> 
    <title>Game</title> 

    <style media="screen" type="text/css"> 
     body, html { 
     margin: 0; 
     padding: 0; 
     width: 100%; 
     height: 100%; 
     overflow: hidden; 
     } 

     #canvas { 
     position: absolute; 
     } 
    </style> 

    <!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> --> 
    <!-- <meta charset="utf-8"> --> 
    <!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> --> 
    </head> 

    <body> 
    <canvas id="canvas"> 
     Your browser needs to support canvas to play this game! 
    </canvas> 

    <!-- Include libraries --> 
    <script type="text/javascript" src="js/pentagine/build/pentagine.js"></script> 
    <script type="text/javascript" src="js/cp.min.js"></script> 

    <!-- Include game classes --> 
    <script type="text/javascript" src="js/MenuState.js"></script> 
    <script type="text/javascript" src="js/Block.js"></script> 
    <script type="text/javascript" src="js/Constants.js"></script> 
    <script type="text/javascript" src="js/Utils.js"></script> 
    <script type="text/javascript" src="js/ScoreState.js"></script> 
    <script type="text/javascript" src="js/PlayState.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
    </body> 
</html>

Соответствующие линии являются CSS, и эти из них:HTML5 Mobile Game CSS

<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> --> 
<!-- <meta charset="utf-8"> --> 
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->

Я хочу, чтобы мой холст занимают столько же экран, как есть, чтобы занять. Я хочу, чтобы мой холст был полноэкранным, и это работало нормально как в Firefox, Chromium, так и в Firefox, но теперь, похоже, он не работает ни на одном. Мне нужна помощь с выяснить теги CSS и content="" сделать холст (и, следовательно, как много пространства холста context.width и context.height занимают, как есть.

источник

2013-09-16 David Gomes

Почему ваше полотно: абсолютное? Просто удалите это и дайте ему ширину: 100%; height: 100% –

Вы должны сделать некоторое исследование, прежде чем задавать вопрос –

Это должно сделать холст на весь экран в CSS (не тестировался, но работает дивы, так что вы должны быть хорошо с холста тоже):

canvas { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    width: auto; 
    height: auto; 
}

в JavaScript можно прочитать окна/документ ширина/высота и добавить его на холст, чтобы вычислить с ним, как это в JQuery:.

$(document).height(); 
$(document).width();

И вот так без jQuery:

document.width; 
document.height;

Я действительно надеюсь, что это поможет вам.

источник

2013-09-16 19:42:42 myxotod

Вы должны установить 'width' и' height' '100%', автоматически не будет автоматически занимать полный пробел. Используя нотацию запятой CSS, вы можете использовать код, который у него уже есть для 'body' –

Fiddle: http://jsfiddle.net/AwLwF/

CSS:

body { 
    position:relative; 
} 
canvas { 
    position:absolute; 
    left:0; 
    top:0; 
}

JS:

$("canvas").width($(document).width()); 
$("canvas").height($(document).height()); 
var ctx = document.getElementById("canvas-element").getContext("2d"); 
function draw() { 
    //draw here 
    ctx.fillStyle="blue"; 
    ctx.fillRect(0,0,200,100); 
    requestAnimationFrame(draw); 
} 
draw();

НО есть небольшая проблема. Соотношение сторон. Странные разрешения уничтожат масштаб рисованных элементов.

источник

2013-09-16 22:38:28 Trebor

HTML5 Mobile Game CSS

ответ

Смежные вопросы