Растянуть canvas на весь экран
http://pastebin.com/qQjNjtvm - что не так?
Пишу небольшое приложение на GameMakerStudio на HTML5. Мне нужно чтобы до начала игры канвас растягивался под область окна и был как бы на весь экран. Сам GMS сделать это может очень криво, теряя fps.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
Пишу небольшое приложение на GameMakerStudio на HTML5. Мне нужно чтобы до начала игры канвас растягивался под область окна и был как бы на весь экран. Сам GMS сделать это может очень криво, теряя fps.
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta charset="utf-8"/>
<!-- Set the title bar of the page -->
<title>Created with GameMaker:Studio</title>
<!-- Set the background colour of the document -->
<style>
body {
background: #222;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
margin: 0px;
padding: 0px;
border: 0px;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class
{
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login
{
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
float: right;
}
div.gm4html5_login_button
{
float: left;
}
div.gm4html5_login_header
{
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
</style>
</head>
<script>
initialize = function()
{
var canvas = document.getElementById("canvas");
if(canvas)
{
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
console.log(canvas);
}
}
</script>
<body onload = initialize()>
<div class="gm4html5_div_class" id="gm4html5_div_id">
<canvas id="canvas">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
</div>
</div>
<!-- Run the game code -->
<script type="text/javascript" src="html5game/index.js?JYKYB=1624467226"></script>
</body>
</html>
<html lang="en">
<head>
<!-- Generated by GameMaker:Studio http://www.yoyogames.com/gamemaker/studio -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta charset="utf-8"/>
<!-- Set the title bar of the page -->
<title>Created with GameMaker:Studio</title>
<!-- Set the background colour of the document -->
<style>
body {
background: #222;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
margin: 0px;
padding: 0px;
border: 0px;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class
{
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login
{
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
float: right;
}
div.gm4html5_login_button
{
float: left;
}
div.gm4html5_login_header
{
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
</style>
</head>
<script>
initialize = function()
{
var canvas = document.getElementById("canvas");
if(canvas)
{
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
console.log(canvas);
}
}
</script>
<body onload = initialize()>
<div class="gm4html5_div_class" id="gm4html5_div_id">
<canvas id="canvas">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
</div>
</div>
<!-- Run the game code -->
<script type="text/javascript" src="html5game/index.js?JYKYB=1624467226"></script>
</body>
</html>