Полноэкранный холст HTML

Ответ 1

В javascript есть

var canvasW     = 640;
var canvasH     = 480;

. Попробуйте изменить их, а также css для холста.

Или еще лучше, пусть функция инициализации определит размер холста из css!

в ответ на ваши изменения, измените вашу функцию init:

function init()
{
    canvas = document.getElementById("mainCanvas");
    canvas.width = document.body.clientWidth; //document.width is obsolete
    canvas.height = document.body.clientHeight; //document.height is obsolete
    canvasW = canvas.width;
    canvasH = canvas.height;

    if( canvas.getContext )
    {
        setup();
        setInterval( run , 33 );
    }
}

Также удалите все css из оберток, которые просто сбрасывают содержимое. Вы должны отредактировать js, чтобы полностью избавиться от них, хотя... Мне удалось получить полный экран.

html, body {
    overflow: hidden;
}

Изменить: document.width и document.height устарели. Замените document.body.clientWidth и document.body.clientHeight

Ответ 2

Вы можете просто вставить следующее на свою главную html-страницу или функцию:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Затем убрать поля на странице

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

Это должно сделать работу

Ответ 3

Новые Chrome и Firefox поддерживают полноэкранный API, но настройка полноэкранного режима похожа на изменение размера окна. Прослушать событие onresize окна-объекта:

$(window).bind("resize", function(){
    var w = $(window).width();
    var h = $(window).height();

    $("#mycanvas").css("width", w + "px");
    $("#mycanvas").css("height", h + "px"); 
});

//using HTML5 for fullscreen (only newest Chrome + FF)
$("#mycanvas")[0].webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); //Chrome
$("#mycanvas")[0].mozRequestFullScreen(); //Firefox

//...

//now i want to cancel fullscreen
document.webkitCancelFullScreen(); //Chrome
document.mozCancelFullScreen(); //Firefox

Это не работает в каждом браузере. Вы должны проверить, существуют ли какие-либо функции, или будет вызывать js-ошибку.

для получения дополнительной информации о html5-fullscreen проверьте это: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Ответ 4

Все, что вам нужно сделать, - установить атрибуты ширины и высоты как размер холста динамически. Таким образом, вы используете CSS, чтобы он растягивался по всему окну браузера, тогда у вас есть небольшая функция в javascript, которая измеряет ширину и высоту и назначает их. Я не ужасно familliar с jQuery, поэтому рассмотрим этот psuedocode:

window.onload = window.onresize = function() {
  theCanvas.width = theCanvas.offsetWidth;
  theCanvas.height = theCanvas.offsetHeight;
}

Атрибуты width и height элемента определяют, сколько пикселей он использует в нем внутренний буфер визуализации. Изменение этих параметров на новые номера заставляет холст повторно инициализировать пустым буфером различного размера. Браузер будет растягивать только графики, если атрибуты ширины и высоты не согласуются с фактической шириной и высотой пикселя реального мира.

Ответ 5

Поскольку он еще не был отправлен и является простым исправлением css:

#canvas {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

Отлично работает, если вы хотите применить полноэкранный холст (например, с Granim.js).

Ответ 6

При загрузке документа установите

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Ответ 7

A - Как рассчитать полную ширину экрана и высоту экрана

Вот функции:

canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Отметьте

B - Как сделать полный экран стабильным с изменением размера

Ниже приведен метод изменения размера для события изменения размера.

function resizeCanvas() {
    canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    WIDTH = canvas.width;
    HEIGHT = canvas.height;

    clearScreen();
}

C - Как избавиться от полос прокрутки

Просто

<style>
    html, body {
        overflow: hidden;
    }
</style>

D - Демо-код

<html>
	<head>
		<title>Full Screen Canvas Example</title>
		<style>
			html, body {
				overflow: hidden;
			}
		</style>
	</head>
	<body onresize="resizeCanvas()">
		<canvas id="mainCanvas">
		</canvas>
		<script>
			(function () {
				canvas = document.getElementById('mainCanvas');
				ctx = canvas.getContext("2d");
				
				canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				WIDTH	= canvas.width;
				HEIGHT	= canvas.height;
				
				clearScreen();
			})();
			
			function resizeCanvas() {
				canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
				canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				
				WIDTH = canvas.width;
				HEIGHT = canvas.height;
				
				clearScreen();
			}
			
			function clearScreen() {
				var grd = ctx.createLinearGradient(0,0,0,180);
				grd.addColorStop(0,"#6666ff");
				grd.addColorStop(1,"#aaaacc");

				ctx.fillStyle = grd;
				ctx.fillRect(  0, 0, WIDTH, HEIGHT );
			}
		</script>
	</body>
</html>

Ответ 8

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    render();
}
window.addEventListener('resize', resize, false); resize();
function render() { // draw to screen here
}

https://jsfiddle.net/jy8k6hfd/2/

Ответ 9

это просто, установите ширину холста и высоту на screen.width и screen.height. затем нажмите F11! думаю, что F11 должен делать полный экран в большинстве браузеров в FFox и IE.

Ответ 10

Надеюсь, это будет полезно.

// Get the canvas element
var canvas = document.getElementById('canvas');

var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);

// Enter fullscreen
function fullscreen(){
    if(canvas.RequestFullScreen){
        canvas.RequestFullScreen();
    }else if(canvas.webkitRequestFullScreen){
        canvas.webkitRequestFullScreen();
    }else if(canvas.mozRequestFullScreen){
        canvas.mozRequestFullScreen();
    }else if(canvas.msRequestFullscreen){
        canvas.msRequestFullscreen();
    }else{
        alert("This browser doesn't supporter fullscreen");
    }
}

// Exit fullscreen
function exitfullscreen(){
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }else{
        alert("Exit fullscreen doesn't work");
    }
}

Ответ 11

AFAIK, HTML5 не предоставляет API, который поддерживает полный экран.

У этого вопроса есть некоторые точки зрения на создание полного экрана html5, например, с помощью webkitEnterFullscreen в webkit.
Есть ли способ сделать полноэкранный просмотр html5

Ответ 12

Вы можете просто захватить события изменения размера окна и установить размер вашего холста в качестве окна просмотра обозревателя.

Ответ 13

Получите полную ширину и высоту экрана и создайте новое окно с соответствующей шириной и высотой и со всеми отключенными. Создайте холст внутри этого нового окна, установив ширину и высоту холста в ширину - 10 пикселей и высоту - 20 пикселей (чтобы разрешить панель и края окна). Затем примените свою магию на этом холсте.

Ответ 14

Ну, я тоже хотел сделать свой холст полноэкранным, вот как я это сделал. Я опубликую весь index.html, так как я еще не эксперт CSS: (в основном, просто использую position: fixed, width и height как 100%, а top и left как 0%, и я вложил этот код CSS для каждого тега. я также имеют минимальную высоту и минимальную ширину как 100%. Когда я пробовал это с рамкой в 1 пиксель, размер границы менялся по мере увеличения и уменьшения, но холст оставался полноэкранным.)

<!DOCTYPE html>
<html style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
<head>
<title>MOUSEOVER</title>
<script "text/javascript" src="main.js"></script>

</head>


<body id="BODY_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">



<div id="DIV_GUI_CONTAINER" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">

<canvas id="myCanvas"  style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">

</canvas>

</div>


</body>


</html>