Exemple d'ajout d'une balise Canvas à une page HTML_html5 conseils du didacticiel

Dans le de la page HTML, vous pouvez utiliser le code suivant pour ajouter la balise  :

Copier le code

Le code est le suivant :

Votre navigateur ne prend en charge HTML5 Canvas.

Remarque de traduction : pour le canevas, l'écriture suivante n'est pas autorisée :

Copier le code

Le code est le suivant :

Jetons un coup d'œil à ce que fait le code ci-dessus. La balise a trois attributs principaux, notamment :

1.id. Nous pouvons utiliser la valeur id pour référencer la balise Dans le code ci-dessus, la valeur id est canvasOne.
2.largeur. La largeur du canevas, en pixels. Dans le code ci-dessus, la valeur de largeur est de 500 pixels.
3.hauteur. La hauteur du canevas, en pixels. Dans le code ci-dessus, la valeur de hauteur est de 300 pixels.

Entre la balise de début et la balise de fin , nous pouvons placer n'importe quel texte lorsque le navigateur qui ouvre la page Web HTML ne prend pas en charge Canvas, ce texte sera affiché dans Canvas. Où se trouve l'étiquette. Dans le code ci-dessus, nous utilisons le texte « Votre navigateur ne prend pas en charge HTML5 Canvas ».

Utiliser un objet document pour référencer un élément de canevas en JavaScript

Lorsque la page HTML est chargée, l'objet document fait référence à tous les éléments de la page, nous pouvons donc utiliser DOM pour faire référence au

Nous avons besoin d'une référence à l'objet Canvas pour savoir où afficher le dessin à l'aide de l'interface Canvas.

Tout d'abord, nous définissons une variable nommée theCanvas pour contenir une référence à l'objet Canvas.

Ensuite, nous appelons la fonction getElementById() de l'objet document et définissons le paramètre entrant sur canvasOne (l'identifiant de la balise dans la page HTML) pour obtenir l'objet Canvas :

Copier le code

Le code est le suivant :

var theCanvas = document.getElementById("canvasOne");