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

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

2 réponses

Répondre au sujet
@karamel 1652 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 19 janvier 2018 Dernière intervention - Modifié par @karamel le 6/04/2017 à 12:43
0
Utile
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
super-S 4 Messages postés jeudi 30 mars 2017Date d'inscription 6 avril 2017 Dernière intervention - 6 avril 2017 à 15:37
0
Utile
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.