Código de JavaScript - canvas en pantalla completa

canvas en pantalla completa

JavaScript

(4)

Actualizado el 18 de Agosto del 2018 por Anonymous (35 códigos) (Publicado el 20 de Agosto del 2016)

5.155 visualizaciones desde el 20 de Agosto del 2016

el código lo que hace es ponerte la pantalla de canvas a pantalla completa de el navegador
nota:quiero agregar que el código no es mio solamente es que lo quiero compartir con ustedes para que no batallen en la creación de sus juegos xd
Captura-de-pantalla-26

Requerimientos

Navegadores web compatibles, o posteriores obligatorio
Google Chrome 4.0
Internet Explorer/Edge 9.0
Firefox 2.0
Safari 3.1
Opera 9.0

Si es de tu ayuda y quieres aprender mas visita:
https://www.youtube.com/channel/UCWSKQyNDhvBVrddHIhzx5Zg?view_as=subscriber

1.0
(4)

Actualizado el 9 de Septiembre del 2018 (Publicado el 20 de Agosto del 2016)

gráfica de visualizaciones de la versión: 1.0

5.156 visualizaciones desde el 20 de Agosto del 2016

te pone el canvas a pantalla completa!

/*

 * Funcion que permite escalar un elemento

 * a pantalla completa y pocisionarlo en

 * el centro del documento.

 * autor: Pablo Elias Pineda

*/

function autoScale(id) {

	var d = document, E, iw = window.innerWidth,

		ih = window.innerHeight, X, Y, scale;

	if(typeof id == 'object') E = id;

	else E = d.getElementById(id);

	X = iw/2 - E.width/2; // centro en x

	Y = ih/2 - E.height/2;// centro en y

	if (iw/E.width > ih/E.height) {

		scale = ih/E.height;

	} else if (iw/E.width < ih/E.height) {

		scale = iw/E.width;

	} else {

		scale = 1;

	document.getElementsByTagName("html")[0].style.overflow = "hidden";

	// acomodar en el centro y escalar a pantalla completa

	E.style.transform = 'translate('+X+'px,'+Y+'px) scale('+scale+')';

	document.body.width = iw;

	// para que se ejecute al cambiar el tamaÃ±o de la ventana

	window.onresize = function (event) {

		autoScale(id);

Comentarios sobre la versión: 1.0 (4)

ScriptShow

19 de Noviembre del 2016

Muy útil para adaptarlo y experimentar...

Gracias por compartirlo.

Responder

anonymous

25 de Febrero del 2017

esto es para aplicarlo en cualquier canvas de el documento

// pantalla completa

autoScale(canvas);

la id del cambas debe ser "canvas"

Responder

miguel

19 de Octubre del 2017

Hola, esta interesante, no dejas de sorprender.
Yo tengo un problema con un puzzle que estoy creandopara mi niño, kiza puedas ayudarme.
Se trata de mover las piezas para conseguir una imagen, pero no consigo que me avise( quiero crear un evento para cuando se complete y un alert para continuar con otro nivel)
Sigo estudiando, pero al ritmo ke voy, lo terminara el antes que yo.
Lo voy a poner en el foro de javascript, con el titulo " añadir funciones a mi rompecabezas",
por si te animas a escharme una mano.
Un saludo y sigue asi fenomeno

Responder