Taille du Canvas = taille de la fenêtre [Résolu]

Signaler
Messages postés
11
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
18 mai 2020
-
Messages postés
11
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
18 mai 2020
-
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

Messages postés
1760
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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 !
Messages postés
11
Date d'inscription
jeudi 30 mars 2017
Statut
Membre
Dernière intervention
18 mai 2020

Merci

ça semble marcher!

Encore merci