Qu'est-ce que le canevas HTML

Le canevas HTML est une zone rectangulaire HTML sur laquelle des graphiques peuvent être dessinés. Chaque pixel peut être contrôlé. Un canevas peut être ajouté à la page via l'élément canevas. "largeur" ​​hauteur="hauteur">".

L'environnement d'exploitation de cet article : système Windows 10, version html5, ordinateur Dell G3.

Qu'est-ce qu'un canevas HTML ?

Un canevas est une zone HTML sur laquelle des graphiques peuvent être dessinés. L'élément

canvas est utilisé pour dessiner des graphiques sur des pages Web. L'élément canevas de

HTML5 utilise JavaScript pour dessiner des images sur la page Web.

La toile est une zone rectangulaire dont vous pouvez contrôler chaque pixel.

canvas propose plusieurs façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Créer un élément de canevas

Ajoutez un élément de canevas à la page HTML5.

Spécifiez l'identifiant, la largeur et la hauteur de l'élément :

<canvas id="myCanvas" width="200" height="100"></canvas>

Dessinez via JavaScript

canvas L'élément lui-même n'a aucune capacité de dessin. Tout le travail de dessin doit être effectué dans JavaScript :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript utilise l'identifiant pour trouver l'élément canevas :

var c=document.getElementById("myCanvas");

Ensuite, créez l'objet contextuel :

var cxt=c.getContext("2d");

getContext("2d") L'objet est un objet HTML5 intégré avec une variété de façons de dessiner des chemins, des rectangles, des cercles, des personnages et d'ajouter des images.

Les deux lignes de code suivantes dessinent un rectangle rouge :

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

La méthode fillStyle le teint en rouge et la méthode fillRect spécifie la forme, la position et la taille.

Tutoriel recommandé : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!