Sujet Précédent Sujet Suivant

Taille du Canvas = taille de la fenêtre

Résolu
super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020 - 5 avril 2017 à 17:31
super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020 - 6 avril 2017 à 15:37
Bonjour,
Je ne suis pas très fort en javascript et après avoir essayé pas mal de trucs, je bloque et je me décide à demander un peu d'aide.

J'ai un canvas en javascript. Dans ce canvas se dessine des lignes aléatoire (+ ou -) avec des variables. Je voudrais que ce canvas fasse la taille de ma fenêtre (en css 100 % ou 99 %). J'ai essayé avec window.innerWidth mais mon canvas est légèrement plus grand que ma fenêtre. ???
Il faut que ce projet puisse être lu depuis un smartphone ou une tablette.
Merci d'avance

Mon code javascript et html: 

<head>
<script type="text/javascript">


function ligne1()
{
 var a1 = Math.floor(Math.random()*800);
 var a2 = Math.floor(Math.random()*800);

    var canvas = document.getElementById('mon_canvas');
        if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

        if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
    
    var context = canvas.getContext('2d');
         if(!context)
        {
            alert("Impossible de rꤵp곥r le context du canvas");
            return;
        } 
		
			
context.beginPath();//On démarre un nouveau tracé
context.lineWidth=1; 
context.moveTo(a1, 0);//On se déplace au coin inférieur gauche (gauche, haut)
context.lineTo(0, a2);
context.stroke();//On trace seulement les lignes
context.closePath();

}

setInterval(ligne1, 500, "JavaScript"); // 3000 est le temps y EN MILISECONDE
</head>

<body>

<div class="container">
<canvas id="mon_canvas"></canvas>
</div>

</body>



Le code CSS 


body{
background-color: #666666;

font-family: verdana;
color: #FFFFFF;
font-size: 10px;


}
 .container {
	 /*width : 99% ;
	 height : 99% ;*/
	 top : 1px;
	 left : 1px;

 }


 
#mon_canvas {
	background-color: green;
	
	border-style: dashed;
	border-color: #FF0000;
	border-width : 1px;
	


}



Un autre point que je ne comprends pas.
Quand je créé une variable

var wW = window.innerWidth / 2;
var wH = window.innerHeight / 2;

ou

var wW = window.innerWidth * 0.5;
var wH = window.innerHeight * 0.5;

et que dans mon canvas 



<script type="text/javascript">



function ligne1()
{
 var a1 = Math.floor(Math.random()*800);
 var a2 = Math.floor(Math.random()*800);
 var wW = window.innerWidth / 2;
 var wH = window.innerHeight / 2;

    var canvas = document.getElementById('mon_canvas');

        if (canvas.width  < window.innerWidth)
            {
                canvas.width  = wW;
            }

        if (canvas.height < window.innerHeight)
            {
                canvas.height = wH;
            }


	var context = canvas.getContext('2d');
         if(!context)
        {
            alert("Impossible de rꤵp곥r le context du canvas");
            return;
        } 
		
			


}

setInterval(ligne1, 500, "JavaScript"); // 3000 est le temps y EN MILISECONDE
document.write ("" + window.innerWidth + "X" + window.innerHeight  + "\n");

</script>
</head>

<body>

<div class="container">
<canvas id="mon_canvas"></canvas>
</div>


Mes lignes ne reste pas affichées. Elle s'affiche puis disparaisse.

Quelqu'un peut m'aider ?
Merci... Vraiment merci

2 réponses

Réponse 1 / 2
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
Modifié le 6 avril 2017 à 12:43
bonjour

il faut initialiser la taille du canvas une seule fois au chargement de la page

j'ai repris le code en ajoutant entre entre autre du css pour afficher le corps de la page sans scroll (overflow: hidden;) et j'ai aussi mis les marge a zéro

pour la largeur il suffit d’utiliser document.body.offsetWidth c'est plus la hauteur qui pose problème. 



<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 body{
 margin:0px;
 padding:0px;
 width:100%;
 height:100%;
 overflow: hidden;
 }
  </style>
 
 
 
  <script>
function ligne1()
{
 var a1 = Math.floor(Math.random()*800);
 var a2 = Math.floor(Math.random()*800);

    var canvas = document.getElementById('mon_canvas');
    
    var context = canvas.getContext('2d');
         if(!context)
        {
            alert("Impossible de rꤵp곥r le context du canvas");
            return;
        } 
  
   
context.beginPath();//On démarre un nouveau tracé
context.lineWidth=1; 
context.moveTo(a1, 0);//On se déplace au coin inférieur gauche (gauche, haut)
context.lineTo(0, a2);
context.stroke();//On trace seulement les lignes
context.closePath();

}

addEventListener("load",function(){

 var canvas = document.getElementById('mon_canvas');
       
    canvas.width  = document.body.offsetWidth;
    canvas.height = innerHeight;
 
 setInterval(ligne1, 500, "JavaScript"); // 3000 est le temps y EN MILISECONDE
})

</script>
</head>

<body>

<div class="container">
<canvas id="mon_canvas" style='background:gray'></canvas>
</div>

</body>

</html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
1
Réponse 2 / 2
super-S Messages postés 11 Date d'inscription jeudi 30 mars 2017 Statut Membre Dernière intervention 18 mai 2020
6 avril 2017 à 15:37
Merci

ça semble marcher!

Encore merci
0
Rejoignez-nous