JavaScript - Graphismes avec Canvas


Cliquez sur le code d'un exemple pour le transférer dans la fenêtre en bas de page
Cliquez sur le bouton [Exécute le code].
Modifiez le code ou composez votre propre code pour vous exercer.

L'élément HTML canvas

Remarques
Le nouvel élément <canvas> permet de définir une zone de la page dans laquelle il est possible de dessiner, de colorier, d'intégrer des images et de réaliser des animations.
Introduit à l'origine par Apple, l'objet <canvas> a été ensuite implémenté dans le moteur Gecko (Mozilla, Galeon, Epiphany...) ainsi que dans Opera.
Cette page peut donc être affichée par l'ensemble des navigateurs de qualité, que ce soit sous linux ou sous XP.
L'élément canvas n'est pas implémenté dans Internet Explorer. Si un autre navigateur est installé sur votre ordinateur ou si vous pouvez en installer un, alors vous pourrez tester quelques possibilités de Canvas. Sinon voyez ci dessous :
Il est possible de contourner le problème de manière peu probante dans Internet Explorer. Dans cette page-ci on utilise explorer canvas, mais le résultat est ce qu'il est.

L'écriture n'est implémentée que par Mozilla, Dans l'exemple [ 10 ], le titre n'est visible que par les utilisateurs de Mozilla ou des navigateurs utilisant le moteur Gecko. Il existe cependant des contournements qui utilisent soit des images, soit des balises <div>, on préfèrerait plus simple.

Canvas
Pour utiliser l'élément canvas, on utilise la balise <canvas> comme dans l'exemple HTML suivant qui réserve un emplacement de taille 300x300 et qui est repérable par son identificateur "papier" (on utilise souvent id="canvas", mais j'ai voulu éviter ici une confusion).
<canvas id="papier" width="300" height="300"></canvas>
La marque de fin </canvas> n'est pas implémenté dans Safari, il est nécessaire dans Mozilla : <canvas id="papier" width="300" height="300">Cet emplacement est un canvas</canvas>

[Exec. 1]  Contexte graphique, coloriages de rectangles :
var canvas = document.getElementById('papier'); // confusion possible, mais on met souvent "canvas" ici
canvas.width=canvas.width;                      // permet une réinitialisation en gardant la même largeur
if (canvas.getContext){                      
  var ctx = canvas.getContext('2d');            // ctx : contexte
                                                // le code graphique est ci-dessous
	ctx.fillStyle = "rgb(1000,1000,1000)";  // blanc
	ctx.fillRect (0, 0, 300, 300);          // en 0,0  et dim. 300x300
        ctx.fillStyle = "rgb(0,100,0)";         // couleur verte
        ctx.fillRect (50, 50, 200, 200);        // rectangle

} else {
                                                // tracé non supporté
}



canvas = document.getElementById('papier') est le nom de l'objet HTML canvas dont l'identificateur est nommé ici "papier"
canvas.getContext vrai ssi l'on peut y créer un objet graphique
ctx = canvas.getContext('2d') est unique pour un <canvas> donné. Plusieurs appels à la fonction donnent le même ctx (contexte)
fillStyle permet de définir la couleur de remplissage
"rgb(1000,1000,1000)"; correspond à la couleur blanche
fillRect(x, y, dx, dy) définit une zone rectangulaire, (x, y) est la position du coin supérieur gauche alors que (dx, dy) sont la largeur et la hauteur


Graphismes

Javascript

Exemples :     [ 1 ],  [ 2 ],  [ 3 ],  [ 4 ],  [ 5 ],  [ 6 ],  [ 7 ],  [ 8 ],  [ 9 ],  [ 10 ],  [ 11 ],  [ 12 ],  [ 13 ],  [ 14 ],  [ 15 ],  [ 16 ],  [ 17 ],  [ 18 ],  [ 19 ],  [ 20 ],  [ 21 ],  [ 22 ],  [ 23 ],  [ 24 ],  [ 25 ],  [ 26 ],  [ 27 ],  [ 28 ],  [ 29 ],  [ 30 ],  [ 31 ],  [ 32 ],  [ 33 ],  [ 34 ], 

           

Exemples

–   [ 1 ] Rectangles
–   [ 2 ] Rectangles
–   [ 3 ] Triangles
–   [ 4 ] Cercles et arcs
–   [ 5 ] Courbes quadratiques (1 point de contrôle)
–   [ 6 ] Courbes de Bézier (2 points de contrôle). Épaisseur des lignes,
–   [ 7 ] Couleur, (composante alpha).
–   [ 8 ] Inclusion d'images.
–   [ 9 ] Couleur.
–   [ 10 ] Découpage et inclusion d'images.
–   [ 11 ] Transformations, rotate, save et restore.
–   [ 12 ] Tracés de lignes (graphe d'une fonction).
–   [ 13 ] Triangle de Pascal modulo k.
–   [ 14 ] Transformations (translations). Spirographes.
–   [ 15 ] Attracteurs étranges. (Voir la page de liens sur les attracteurs).
–   [ 16 ] Matrice de transformation.
–   [ 17 ] Pavage du plan engendré par une rotation d'angle Pi/3 (c.-à-d. 60°) et deux translations u et v non colinéaires et aucune symétrie orthogonale (réflexion).
–   [ 18 ] Pavage du plan engendré par une rotation d'angle 2 Pi/3 (c.-à-d. 120°), une symétrie orthogonale (une réflexion) et deux translations u et v non colinéaires.
–   [ 19 ] Pavage du plan engendré par rotation, réflexion et translations (le motif de base est formé de deux fleurs d'abélias sur une même tige).
–   [ 20 ] Pavage du plan engendré par rotation d'angle Pi/2 et deux translations.
–   [ 21 ]  –   [ 22 ]  –   [ 23 ]  –   [ 24 ]  –   [ 25 ]  –   [ 26 ]  –   [ 27 ]  –   [ 28 ]  –   [ 29 ]  –   [ 30 ]  –   [ 31 ]  –   [ 32 ]  –   [ 33 ]  Plusieurs pavages du plan.
–   [ 34 ] Moiré – Droites et cercles – Faisceaux de Fresnel






[Sommaire]  [Début]  [Fin]      <-  1  2  3  4  5  6  7  8  9  -> 


Pavages d'images
Diaporama des pavages construits sur cette page


Liens

tour
Tutoriel canvas par Mozilla
HTML5 Draft Standard
Explorer canvas
Page de liens sur java et javascript
tests based on the HTML 5 Draft Recommendation. Exemple d'utilisation d'un canvas pour afficher des sprites : example.html.
Clifford Attractor
Gallery of Attraction
Tab Preview Un add-on très pratique de Mozilla basé sur une méthode de Canvas.

















Pour un premier contact, [utilisez ce formulaire] ou utilisez l'adresse de messagerie qui y figure. Merci d'indiquer la page précise du site "http//jm.davalan.org/...", cela m'aidera beaucoup. Ne joignez aucun document à votre message.
Jeux-et-Mathématiques n'est pas un site commercial. Aucun des liens placés sur ce site n'est rémunéré, ni non plus aucune des informations données.
Important : Si votre question a un quelconque rapport avec un travail personnel (Devoir TIPE Master...) , vous devez absolument me le préciser dès votre premier message et m'indiquer très précisément les limites des informations demandées. Vous devez aussi avertir la personne qui dirige éventuellement votre travail ou le corrige de cette communication et lui montrer les documents fournis.

J'essaie de répondre aux questions posées, mais ne lis pas les documents mathématiques amateurs, pas plus que je ne donne mon avis sur les démonstrations des conjectures de Collatz ou autres. Je ne lis pas les documents word, je ne corrige pas les programmes informatiques et depuis des années je n'utilise plus de tableur.

© (Copyright) Jean-Paul Davalan 2002-2014