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

Messages postés
5
Date d'inscription
jeudi 30 mars 2017
Dernière intervention
5 mars 2018
- 5 avril 2017 à 17:31 - Dernière réponse :
Messages postés
5
Date d'inscription
jeudi 30 mars 2017
Dernière intervention
5 mars 2018
- 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
Afficher la suite 

Votre réponse

2 réponses

Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
Modifié par @karamel le 6/04/2017 à 12:43
0
Merci
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 !
Commenter la réponse de @karamel
Messages postés
5
Date d'inscription
jeudi 30 mars 2017
Dernière intervention
5 mars 2018
6 avril 2017 à 15:37
0
Merci
Merci

ça semble marcher!

Encore merci
Commenter la réponse de super-S

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.