Il ne faut pas que sur un petit écran (smartphone) la zone de dessin soit rognée.
Pour cette page, affichez la console !
Pour certains canevas présentés dans les chapitres précédents, je vous indiquais que l'instructions HTML était, par exemple :
En fait le code HTML pour l'élément Canvas doit ressembler à cela :
Le canevas s'affiche alors dans la page web conformément aux valeurs des propriétés "width & height" de l'élément Canvas.
Les attributs width & height sont facultatifs ; le répère cartésien fait alors 300 par 150.
Leur largeur est toujours égale à 80% de la largeur de BODY.
Réduisez la largeur de la fenêtre et observez ...
La règle de style canvas {width : 80% ; } précise la largeur d'affichage du canevas dans la page : 80% de la largeur
du conteneur parent (ici le conteneur parent est BODY).
Dans chaque canevas je dessine une courbe quadratique.
Je ne commente pas le code correspondant aux courbes quadratiques puisque lesdites courbes sont
traitées dans le chapitre suivant.
La deuxième courbe ressemblait plus à une suite de segments qu'à une courbe.
C'est tout simplement parce que le nombre de pixels est insuffisant du fait d'un repère cartésien médiocre (300 par 150).
Ci-dessous, je rajoute un troisième canevas à la page : version améliorée de la deuxième courbe.
Cette fois-ci la courbe ressemble vraiment à une courbe.
Les attributs width & height de ce troisième canevas sont 1000 par 500 (au lieu de 300 & 150 pour le deuxième).
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Des canevas "responsives"
La bonne syntaxe pour l'élément Canvas
J'avoue, je vous ai menti !
< canvas width ="600" height ="400" ... >
Or même sur un écran de smartphone (en mode portrait) le canevas s'affichait correctement (n'était pas rogné).
Pourtant pour un écran de mobile il n'y a pas jamais 600 pixels en largeur ...
Le véritable code de l'instruction canvas était un peu différent de celui annoncé.
La bonne syntaxe
<canvas width ="600" height ="400" style ="width :80%;" >
Bien sûr à la place de l'attribut style on peut utiliser l'attribut class ou définir une règle de
style pour les éléments CANVAS : canvas {...}
Quant aux attributs width & height de l'élément CANVAS ils sont utilisés pour positionner et dessiner les formes
dans cette zone de dessin. Ils définissent donc un repère cartésien.
Ci-dessous deux canevas 'responsives'
Les canevas s'adaptent à la largeur de la fenêtre.
La console vous informe que quelque soit la largeur de la fenêtre les dimensions officielles des canevas sont :
Le code correspondant à ces deux canevas
Code CSS & HTML
Les attributs width & height définissent le repère cartésien du canevas ;
les dimensions et coordonnées des formes sont déterminées conformément à ce repère cartésien.
Et si ces attributs sont absents (comme pour le deuxième canvas) le répère cartésien fait alors par défaut 300 par 150.
Les scripts correspondants
// pour dessiner dans le premier canevas
function fcanevas1()
{
canevas= document.querySelector('#canevas1');
contexte= canevas1.getContext('2d');
var X = canevas.width;
var Y = canevas.height;
console.log(X + " " +typeof(X));
console.log(Y + " " +typeof(Y));
// courbe quadratique dans le premier canevas
contexte.beginPath();
contexte.moveTo(0,Y/2) ;
contexte.quadraticCurveTo(X/2,Y-50,X,Y/2);
contexte.stroke();
}
fcanevas1();
// pour dessiner dans le deuxième canevas
function fcanevas2()
{
canevas = document.querySelector('#canevas2');
contexte = canevas.getContext('2d');
var X = canevas.width;
var Y = canevas.height;
console.log(X + " " +typeof(X));
console.log(Y + " " +typeof(Y));
// courbe quadratique dans le deuxième canevas
contexte.beginPath();
contexte.moveTo(0,Y/2) ;
contexte.quadraticCurveTo(X/2,Y+50,X,Y/2);
contexte.stroke();
}
fcanevas2();
Troisième courbe : amélioration de la seconde
Voyons comment améliorer cette courbe.
Le code correpondant :
Pour que les courbes, cercles et arcs de cercle dans les canevas soient esthétiques, il
faut que les valeurs des attributs "width" & "height" de la balise CANVAS soient significatives.
Évitez donc les valeurs par défaut du repère cartésien d'un canevas (300 par 150).