Notes d'étude préliminaires sur Html5 Canvas (1) -Dessiner un rectangle

L'élément

canvas est une nouvelle fonctionnalité de Html5 par rapport au précédent Html , cet article de blog étudiera l'application de ce composant, notamment son application dans le développement de jeux Web. Le composant

canvas est similaire aux composants table et p précédents, et peut être exécuté sans aucun plug-in externe. Utilisez simplement html et utilisez le contexte de rendu 2D API (API de contexte 2Drender) similaire à notre développement j2me Grapics dans android et canvas pinceau dans android

Tant que vous obtenez ce contexte, vous pouvez appeler. sa propre méthode pour dessiner.

On peut définir un canevas comme suit :

<canvas id="canvas" width="400" height="400"> </canvas>

Canvas est utilisé comme wrapper pour le contexte de rendu 2D, 2DLe contexte de rendu est basé sur le "pinceau" du canvascanvas. Il utilise un système de coordonnées cartésiennes plates avec le coin supérieur gauche comme origine (0, 0). En se déplaçant vers la droite, la valeur des coordonnées de x augmentera. En se déplaçant vers le bas, la valeur de y augmentera, ce qui est très similaire à la nôtre La toile j2me.

D'accord, après avoir introduit quelques concepts de base, je vais construire le premier Html5 Canvas, d'abord de tout, le rendu est le suivant

Un très simple Un exemple est de dessiner un rectangle. Regardons le code ci-dessous :

Parmi eux, l'étiquette de toile définit un canevas canvas, mais aucun traitement n'est effectué. La partie de la balise script est js<.> La partie code, la partie suivante consiste à obtenir le contexte de rendu :

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

obtenez d'abord l'élément canvas, puis obtenez l'élément 2dContexte rendu.

Le code suivant permet de dessiner la partie rectangulaire :

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

Définissez d'abord la couleur, puis dessinez. Les quatre paramètres sont les coordonnées horizontales et verticales du point de départ. et la largeur et la hauteur

Ce qui précède est le contenu des notes d'étude préliminaires de Html5 Canvas (1) - Dessiner un rectangle Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !