HTML Canvas Plein écran
Je joue avec l'application suivante à l'aide du canevas HTML: http://driz.co.uk/particles/
Pour le moment, il est réglé sur 640x480 pixels, mais je voudrais le faire en plein écran car il sera montré un projecteur. Cependant, pour autant que je sache, je ne peux pas définir la taille de la zone de dessin sur 100%, car les variables ne contiennent que des nombres et non le%. L'utilisation de CSS ne fait que l'étirer plutôt que de le rendre réel en plein écran.
Des idées?
EDIT: J'ai essayé de trouver la hauteur et la largeur en utilisant jQuery mais cela brise la toile des idées pourquoi?
var $j = jQuery.noConflict();
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var canvasW = $j('body').width();
var canvasH = $j('body').height();
//var canvasW = 640;
//var canvasH = 480;
var numMovers = 550;
var movers = [];
var friction = .96;
var radCirc = Math.PI * 2;
var mouseX, mouseY, mouseVX, mouseVY, prevMouseX = 0, prevMouseY = 0;
var isMouseDown = true;
function init()
{
canvas = document.getElementById("mainCanvas");
if( canvas.getContext )
{
setup();
setInterval( run , 33 );
}
}
function setup()
{
outerDiv = document.getElementById("outer");
canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while( i-- )
{
var m = new Mover();
m.x = canvasW * .5;
m.y = canvasH * .5;
m.vX = Math.cos(i) * Math.random() * 25;
m.vY = Math.sin(i) * Math.random() * 25;
m.size = 2;
movers[i] = m;
}
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;
}
function run()
{
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(8,8,12,.65)";
ctx.fillRect( 0 , 0 , canvasW , canvasH );
ctx.globalCompositeOperation = "lighter";
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
var toDist = canvasW / 1.15;
var stirDist = canvasW / 8;
var blowDist = canvasW / 2;
var Mrnd = Math.random;
var Mabs = Math.abs;
var Msqrt = Math.sqrt;
var Mcos = Math.cos;
var Msin = Math.sin;
var Matan2 = Math.atan2;
var Mmax = Math.max;
var Mmin = Math.min;
var i = numMovers;
while( i-- )
{
var m = movers[i];
var x = m.x;
var y = m.y;
var vX = m.vX;
var vY = m.vY;
var dX = x - mouseX;
var dY = y - mouseY;
var d = Msqrt( dX * dX + dY * dY );
var a = Matan2( dY , dX );
var cosA = Mcos( a );
var sinA = Msin( a );
if( isMouseDown )
{
if( d < blowDist )
{
var blowAcc = ( 1 - ( d / blowDist ) ) * 2;
vX += cosA * blowAcc + .5 - Mrnd();
vY += sinA * blowAcc + .5 - Mrnd();
}
}
if( d < toDist )
{
var toAcc = ( 1 - ( d / toDist ) ) * canvasW * .0014;
vX -= cosA * toAcc;
vY -= sinA * toAcc;
}
if( d < stirDist )
{
var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * .00022;
vX += mouseVX * mAcc;
vY += mouseVY * mAcc;
}
vX *= friction;
vY *= friction;
var avgVX = Mabs( vX );
var avgVY = Mabs( vY );
var avgV = ( avgVX + avgVY ) * .5;
if( avgVX < .1 ) vX *= Mrnd() * 3;
if( avgVY < .1 ) vY *= Mrnd() * 3;
var sc = avgV * .45;
sc = Mmax( Mmin( sc , 3.5 ) , .4 );
var nextX = x + vX;
var nextY = y + vY;
if( nextX > canvasW )
{
nextX = canvasW;
vX *= -1;
}
else if( nextX < 0 )
{
nextX = 0;
vX *= -1;
}
if( nextY > canvasH )
{
nextY = canvasH;
vY *= -1;
}
else if( nextY < 0 )
{
nextY = 0;
vY *= -1;
}
m.vX = vX;
m.vY = vY;
m.x = nextX;
m.y = nextY;
ctx.fillStyle = m.color;
ctx.beginPath();
ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
ctx.closePath();
ctx.fill();
}
//rect( ctx , mouseX - 3 , mouseY - 3 , 6 , 6 );
}
function onDocMouseMove( e )
{
var ev = e ? e : window.event;
mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;
}
function onDocMouseDown( e )
{
isMouseDown = true;
return false;
}
function onDocMouseUp( e )
{
isMouseDown = true;
return false;
}
// ==========================================================================================
function Mover()
{
this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
this.y = 0;
this.x = 0;
this.vX = 0;
this.vY = 0;
this.size = 0;
}
// ==========================================================================================
function rect( context , x , y , w , h )
{
context.beginPath();
context.rect( x , y , w , h );
context.closePath();
context.fill();
}
// ==========================================================================================
Le javascript a
var canvasW = 640;
var canvasH = 480;
en elle. Essayez de changer ceux-ci ainsi que les css pour la toile.
Ou mieux encore, demandez à la fonction d'initialisation de déterminer la taille de la toile à partir du fichier css!
en réponse à vos modifications, changez votre fonction 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 );
}
}
Supprimez également tous les css des wrappers, cela ne fait que bouger. Vous devez modifier les fichiers js pour vous en débarrasser complètement ... Cependant, j’ai réussi à les obtenir en plein écran.
html, body {
overflow: hidden;
}
Éditer : document.width et document.heightsont obsolètes . Remplacer par document.body.clientWidth et document.body.clientHeight
Vous pouvez simplement insérer les éléments suivants dans votre page HTML principale ou dans une fonction:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Puis supprimer les marges sur la page
html, body {
margin: 0 !important;
padding: 0 !important;
}
Cela devrait faire le travail
Le plus récent Chrome et Firefox prennent en charge une API plein écran, mais le paramètre plein écran ressemble à un redimensionnement de fenêtre. Écoutez l'événement onresize de l'objet window:
$(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
Cela ne fonctionne pas dans tous les navigateurs. Vous devriez vérifier si les fonctions existent ou il y aura une erreur js.
pour plus d'informations sur html5-fullscreen, vérifiez ceci: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API
Tout ce que vous avez à faire est de définir dynamiquement les attributs de largeur et de hauteur sur la taille du canevas. Donc, vous utilisez CSS pour le faire s'étendre sur toute la fenêtre du navigateur, alors vous avez une petite fonction en javascript qui mesure la largeur et la hauteur, et les assigne. Je ne suis pas très familier avec jQuery, donc considérez ce psuedocode:
window.onload = window.onresize = function() {
theCanvas.width = theCanvas.offsetWidth;
theCanvas.height = theCanvas.offsetHeight;
}
Les attributs width et height de l'élément déterminent le nombre de pixels qu'il utilise dans son tampon de rendu interne. Si vous modifiez ces valeurs en un nouveau nombre, le canevas se réinitialisera avec un tampon vide de taille différente. Le navigateur étire les graphiques uniquement si les attributs width et height ne concordent pas avec la largeur et la hauteur réelles des pixels du monde réel.
Parce qu’il n’a pas encore été posté et qu’il s’agit d’un correctif css simple:
#canvas {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
}
Fonctionne très bien si vous souhaitez appliquer un arrière-plan de toile plein écran (par exemple, avec Granim.js).
Lors du chargement de document, définissez la
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
A - Comment calculer la largeur et la hauteur de l'écran complet
Voici les fonctions;
canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
Vérifiez ceci out
B - Comment rendre le plein écran stable avec le redimensionnement
Voici la méthode de redimensionnement pour l'événement de redimensionnement;
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 - Comment se débarrasser des barres de défilement
Simplement;
<style>
html, body {
overflow: hidden;
}
</style>
D - Code de démonstration
<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>J'espère que cela vous sera utile.
// 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");
}
}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
render();
}
window.addEventListener('resize', resize, false); resize();
function render() { // draw to screen here
}
c'est simple, définissez la largeur et la hauteur de la toile sur screen.width et screen.height. puis appuyez sur F11! pense que F11 devrait faire plein écran dans la plupart des navigateurs dans FFox et IE.
Eh bien, je cherchais aussi à rendre ma toile plein écran. C’est ainsi que je l’ai fait. Je posterai l'intégralité du fichier index.html, car je ne suis pas encore expert en CSS: (en utilisant simplement position: fixed, width et height 100%, top and left 0% et j'ai imbriqué ce code CSS pour chaque tag. I Les options min-height et min-width sont également définies à 100%. Lorsque je l’essayais avec une bordure de 1px, la taille de la bordure changeait lorsque je zoomais avant et arrière mais la toile restait en plein écran.)
<!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>EDIT: ajoutez ceci à l'élément canvas:
<canvas id="myCanvas" width="" height="" style="position:fixed;min-height:100%;min-width:100%;height:100%;width:100%;top:0%;left:0%;resize:none;">
</canvas>ajouter ceci au javascript
canvas.width = window.screen.width;
canvas.height = window.screen.height;
J'ai trouvé que cela rendait le dessin beaucoup plus lisse que mon commentaire d'origine.
Merci.
Obtenez toute la largeur et la hauteur de l'écran et créez une nouvelle fenêtre avec la largeur et la hauteur appropriées, avec tout désactivé. Créez un canevas à l'intérieur de cette nouvelle fenêtre, en définissant la largeur et la hauteur du canevas: 10px en largeur et 20px en hauteur (pour tenir compte de la barre et des bords de la fenêtre). Puis travaillez votre magie sur cette toile.
Autant que je sache, HTML5 ne fournit pas d’API prenant en charge le mode plein écran.
Cette question a quelques points de vue sur la réalisation de vidéos html5 en plein écran, par exemple, en utilisant webkitEnterFullscreen dans webkit.
Est-il possible de faire de la vidéo html5 en plein écran
Vous pouvez simplement capturer des événements de redimensionnement de fenêtre et définir la taille de votre zone de travail pour qu'elle soit la fenêtre d'affichage du navigateur.