Retourner à la page d'accueil de TJS

Objet : HTMLCanvasElement

          

Elément HTML correspondant au canvas et permettant la création graphique par JavaScript


Description
L'objet HTMLCanvasElement est l'objet correspondant à la balise canvas du document HTML.
HTMLCanvasElement hérite des propriétés et des méthodes de HTMLElement et lui ajoute de nombreuses possibilités permettant le dessin dans le navigateur, en particulier grâce à l'objet de contexte CanvasRenderingContext2D


Méthodes
getContext() (Retourne l'objet contexte de dessin de myCanvas)
toDataURL() (Convertit le contenu du canvas en données texte utilisable dans une image)

Exemple Un exemple basique de dessin dans canvas
Code source
<canvas id="myCanvas">Balise non reconnue</canvas>
<script type="text/javascript">
 var myCanvas=document.getElementById("myCanvas");
 console.log(myCanvas);

 var ctx=myCanvas.getContext("2d");

 ctx.rect(10, 10, 200, 100);
 ctx.stroke();
</script>

Résultat
Balise non reconnue
Emulation de la console
Explication
Crée un canvas et dessine un rectangle dedans.
myCanvas est alimentée par getElementById().
Il est affiché dans la console pour vous montrer les particularités de cet objet.

L'appel à getContext() permet de définir la variable ctx, objet de type CanvasRenderingContext2D qui supporte toutes les méthodes de dessins.

Page en rapport
Le tutoriel sur le dessin avec canvas
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 23/11/2017 19:27:08 sur php7 en 21.69 ms