Programmation API de toile HTML5

Auteur：Eve Cole Date de mise à jour：2025-04-04 20:48:02

essayer

{

Document.CreateElement ("Canvas"). GetContext ("2D");

document.getElementById ("Support"). innerHtml = "OK";

}

attraper (e)

{

document.getElementById ("Support"). InnerHtml = E.Message;

}

</cript>

Rejoignez la toile

// Obtenez l'élément Canvas et son contexte de dessin var canvas = document.getElementById ("Diagonal");

var context = canvas.getContext ("2d");

// Créer un chemin avec des coordonnées absolues

context.beginPath ();

context.moveto (70, 140);

context.lineto (140, 70);

// trace cette ligne sur toile

context.stroke ();

Transformer

Les mêmes effets que ci-dessus peuvent être obtenus par transformation (mise à l'échelle, traduction, rotation), etc.

Tracer les lignes diagonales par transformation

// Obtenez l'élément de toile et son contexte de dessin

var canvas = document.getElementById ("Diagonal");

var context = canvas.getContext ("2d");

// Enregistrer l'état de dessin actuel

context.save ();

// déplace le contexte de dessin vers le bas à droite

context.translate (70, 140);

// dessine le même segment de ligne que le précédent avec l'origine comme point de départ

context.beginPath ();

context.moveto (0, 0);

context.lineto (70, -70);

context.stroke (); context.Restore ();

chemin

Les chemins de l'API HTML5 Canvas représentent toute forme que vous souhaitez rendre.

BeginPath (): Quel que soit le type de graphique que vous commencez à dessiner, la première chose que vous devez appeler est BeginPath. Cette fonction simple ne prend pas de paramètres et est utilisée pour informer Canvas qu'il est sur le point de commencer à dessiner un nouveau graphique.

MOVETO (x, y): pas de dessin, déplacez la position actuelle vers la nouvelle coordonnée cible (x, y).

LineTo (x, y): non seulement déplace la position actuelle vers la nouvelle coordonnée cible (x, y), mais trace également une ligne droite entre les deux coordonnées.

ClosePath (): Cette fonction se comporte beaucoup comme Lineto. La seule différence est que ClosePath utilisera automatiquement la coordonnée de démarrage du chemin comme coordonnée cible. Il informe également toile que la figure actuellement dessinée a été fermée ou a formé une zone complètement fermée, qui est très utile pour les remplissages et les coups futurs.

Dessiner une canopée de pin

fonction createCanopypath (context) {

// dessiner la canopée des arbres

context.beginpath (); context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); // sommet de l'arbre

context.lineto (0, -140); context.lineto (15, -110);

context.lineto (5, -110);

context.lineto (20, -80);

context.lineto (10, -80);

context.lineto (25, -50);

// Connectez le point de départ et fermez le chemin

context.closepath ();

} fonction drawtrails () {

var canvas = document.getElementById ('Diagonal');

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

context.translate (130, 250); // Créez un chemin qui exprime la canopée

createCanopypath (contexte); // dessinez le chemin actuel

context.stroke ();

context.Restore ();

} window.adDeventListener ("Load", DrawTrails, True);

Style de course

Le mode de trait permet à la canopée de paraître plus réaliste.

// large les lignes

context.linewidth = 4;

// Le point de jonction du chemin lisse

context.lineJoin = 'Round';

//couleur

context.strokestyle = '# 663300';

// dessine le chemin actuel

context.stroke ();

Style de remplissage

context.fillStyle = # 339900; context.fill (); dessiner un rectangle

Nous ajoutons des troncs à l'arbre

context.fillStyle = '# 663300'; context.fillrect (-5, -50, 10, 50); Tracer la courbe

context.save ();

context.translate (-10, 350);

context.beginpath (); // La première courbe se plie en haut à droite

context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); // pliez vers le bas à droite

context.quadraticcurveto (310, -250, 410, -250); // Tracez le chemin dans un large coup brun

context.strokestyle = '# 663300';

context.linewidth = 20;

context.stroke (); // Restaurez l'état de toile précédent

context.Restore ();

Insérer l'image en toile

Vous devez attendre que l'image soit entièrement chargée avant de pouvoir fonctionner. Les navigateurs chargent généralement des images de manière asynchrone lorsque le script de page est exécuté. Si vous essayez de rendre l'image à Canvas avant qu'elle ne soit complètement chargée, Canvas n'affichera aucune image. Par conséquent, accordez une attention particulière à vous assurer que l'image est chargée avant le rendu.

// Chargez l'image

var bark = new image ();

bark.src = "bark.jpg"; // Une fois l'image chargée, appelez la fonction de dessin

bark.onload = function () {

drawTrails ();

}

Afficher les images:

// Remplissez le modèle d'arrière-plan comme contexte d'arrière-plan. pente

L'utilisation des gradients nécessite trois étapes:

(1) créer un objet dégradé

(2) Définir la couleur des objets de gradient et indiquer la méthode de transition

(3) Définir les gradients pour les styles de remplissage ou les styles de trait sur le contexte

// Créez un gradient horizontal de troisième ordre qui est utilisé comme texture de tronc

var trunkradient = context.CreateLlineargradient (-5, -50, 5, -50); // Le bord gauche du tronc est de couleur marron moyenne

trunkgradient.addcolOrStop (0, '# 663300'); // Il y a de la couleur à dire au milieu gauche du coffre d'arbre

trunkradient.addcolorstop (0,4, '# 996600'); // La couleur du bord droit doit être plus foncée

trunkradient.addcolorstop (1, '# 552200'); // Remplissez le coffre de gradients

context.fillStyle = trunkradient;

context.fillrect (-5, -50, 10, 50);

// Créez un gradient vertical pour projeter la canopée sur le tronc

var canopyshadow = context.CreateLlineargradient (0, -50, 0, 0);

// Le point de départ du gradient de projection est noir avec une transparence de 50%

Canopyshadow.addColOrStop (0, 'rgba (0, 0, 0, 0,5)');

// La direction est verticalement vers le bas, et le gradient se transforme rapidement en complètement transparent sur une très courte distance, à l'extérieur de cette longueur

// il n'y a pas de projection sur le tronc de l'arbre

canopyshadow.addcolorstop (0,2, 'rgba (0, 0, 0, 0,0)'); // Remplissez le gradient de projection sur le tronc

context.fillStyle = Canopyshadow;

context.fillrect (-5, -50, 10, 50);

Image de fond

// Chargez l'image

var Gravel = nouvelle image ();

Gravel.src = "Gravel.jpg";

Gravel.onload = function () {

drawTrails ();

} // Remplacez les lignes épaisses brunes par des images d'arrière-plan

context.strokestyle = context.createpattern (Gravel, «répéter»);

context.linewidth = 20;

context.stroke ();

Le deuxième paramètre de contexte.

Méthode de carrelage	importance
répéter	(Par défaut) L'image sera carrelée dans deux directions
répéter-x	Carrelage plat horizontal
répéter	Carrelage plat vertical
sans répétition	L'image n'est affichée qu'une seule fois, pas carrelée

Zoom

La fonction de mise à l'échelle Context.Scale (x, y): x, y représentent les valeurs dans les deux dimensions de x et y respectivement. Lorsque chaque paramètre affiche une image, il lui transmet la quantité de l'image à agrandir (ou réduite) sur l'axe de cette direction. Si la valeur X est 2, cela signifie que tous les éléments de l'image dessinés deviendront deux fois plus larges. Si la valeur Y est de 0,5, l'image dessinée deviendra la moitié de la hauteur.

// dessine le premier arbre à x = 130, y = 250

context.save ();

context.translate (130, 250);

drawtree (contexte);

context.Restore (); // dessinez le deuxième arbre à x = 260, y = 500

context.save ();

context.translate (260, 500); // zoomez la hauteur et la largeur du deuxième arbre pour deux fois l'original

context.scale (2, 2);

drawtree (contexte);

context.Restore ();

Tourner

Faire pivoter l'image

context.save ();

// Les paramètres d'angle de rotation sont en radians sous forme d'unités

context.rotate (1.57);

context.Drawimage (MyImage, 0, 0, 100, 100); context.Restore ();

Une méthode d'utilisation de la transformation

// Enregistrer l'état actuel

context.save (); // La valeur x augmente à mesure que la valeur y augmente. Avec l'aide d'une transformation de traction,

// peut créer un arbre incliné utilisé comme ombre

// Une fois la transformation appliquée, toutes les coordonnées sont multipliées par la matrice

context.transform (1, 0,

-0,5, 1,

, 0); // Dans la direction de l'axe y, passez la hauteur de l'ombre à 60%

context.scale (1, 0,6); // Remplissez le coffre d'une transparence noire de 20%

context.fillStyle = 'rgba (0, 0, 0, 0,2)';

context.fillrect (-5, -50, 10, 50); // repeindre l'arbre avec l'effet d'ombre existant

CreateCanopypath (contexte);

context.fill (); // Restaurez l'état de toile précédent

context.Restore ();

texte

context.fillText (texte, x, y, maxwidth): contenu texte de texte, x, y spécifie la position du texte, maxwidth est un paramètre facultatif, limite la position du texte.

context.stroketext (texte, x, y, maxwidth): contenu texte de texte, x, y spécifie la position du texte, maxwidth est un paramètre facultatif, limite la position du texte.

// dessinez du texte sur toile

context.save (); // La taille de la police est de 60, la police est un impact

context.font = "60px Impact"; // Remplacer la couleur

context.fillStyle = '# 996600';

//Centre

context.textalign = 'Center'; // dessiner du texte

context.fillText («Happy Trails!», 200, 60, 400);

context.Restore ();

ombre

Les ombres peuvent être contrôlées à travers plusieurs propriétés de contexte mondial

propriété	valeur	Remarque
shadowcolor	Valeurs de couleurs dans n'importe quel CSS	La transparence (alpha) peut être utilisée
shadowoffsetx	Valeur de pixel	La valeur est positive, déplacez l'ombre vers la droite; c'est négatif, déplacez l'ombre vers la gauche
shadowoffsety	Valeur de pixel	La valeur est positive, déplacez l'ombre vers le bas; c'est négatif, déplacez l'ombre vers le haut
farce	Valeur floue gaussienne	Plus la valeur est grande, plus les bords des ombres sont flous

// couleur noire, 20% de transparence

context.shadowcolor = 'rgba (0, 0, 0, 0,2)'; // Déplacez 15px vers la droite et 10px à gauche

context.shadowoffsetx = 15;

context.shadowoffsety = -10; // ombre légèrement floue

context.shadowblur = 2;

Données de pixels

context.getimagedata (SX, SY, SW, SH): SX, XY détermine un point, SW: Largeur, Sh: Hauteur.

Cette fonction renvoie trois propriétés: Largeur combien de pixels par ligne Hauteur combien de pixels par colonne

Données Un tas de tableaux contenant les valeurs RGBA (valeurs rouges, vert, bleu et transparence) de chaque pixel obtenu à partir de toile.

context.putImagedata (iMagedata, dx, dy): permet aux développeurs de passer dans un ensemble de données d'image. DX, DY est utilisé pour spécifier le décalage. S'il est utilisé, la fonction sautera à la position de canevas spécifiée pour mettre à jour

Affiche les données de pixels entrants.

Canvas.todataurl: Les données actuellement présentées sur Canvas peuvent être obtenues par programme. Les données obtenues sont enregistrées au format texte et le navigateur peut les analyser dans une image.