<script type = "text / javascript">
essayer
{
Document.CreateElement ("Canvas"). GetContext ("2D");
document.getElementById ("Support"). innerHtml = "OK";
}
attraper (e)
{
document.getElementById ("Support"). InnerHtml = E.Message;
}
</cript>
Rejoignez la toile <Canvas ID = STYLE diagonal = bordure: 1px bleu solide; largeur = 200 hauteur = 200 />// 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 ();
TransformerLes 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 (); </p> <p> context.Restore ();
cheminLes 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 (); </p> <p> context.moveto (-25, -50);
context.lineto (-10, -80);
context.lineto (-20, -80);
context.lineto (-5, -110);
context.lineto (-15, -110); </p> <p> // sommet de l'arbre
context.lineto (0, -140); </p> <p> 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 ();
} </p> <p> fonction drawtrails () {
var canvas = document.getElementById ('Diagonal');
var context = canvas.getContext ('2d'); </p> <p> context.save ();
context.translate (130, 250); </p> <p> // Créez un chemin qui exprime la canopée
createCanopypath (contexte); </p> <p> // dessinez le chemin actuel
context.stroke ();
context.Restore ();
} </p> <p> window.adDeventListener ("Load", DrawTrails, True);
Style de courseLe 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 rectangleNous ajoutons des troncs à l'arbre
context.fillStyle = '# 663300'; context.fillrect (-5, -50, 10, 50); Tracer la courbecontext.save ();
context.translate (-10, 350);
context.beginpath (); </p> <p> // La première courbe se plie en haut à droite
context.moveto (0, 0);
context.quadraticcurveto (170, -50, 260, -190); </p> <p> // pliez vers le bas à droite
context.quadraticcurveto (310, -250, 410, -250); </p> <p> // Tracez le chemin dans un large coup brun
context.strokestyle = '# 663300';
context.linewidth = 20;
context.stroke (); </p> <p> // Restaurez l'état de toile précédent
context.Restore ();
Insérer l'image en toileVous 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"; </p> <p> // 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. penteL'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); </p> <p> // Le bord gauche du tronc est de couleur marron moyenne
trunkgradient.addcolOrStop (0, '# 663300'); </p> <p> // Il y a de la couleur à dire au milieu gauche du coffre d'arbre
trunkradient.addcolorstop (0,4, '# 996600'); </p> <p> // La couleur du bord droit doit être plus foncée
trunkradient.addcolorstop (1, '# 552200'); </p> <p> // 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)'); </p> <p> // 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 ();
} </p> <p> // 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 |
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 (); </p> <p> // dessinez le deuxième arbre à x = 260, y = 500
context.save ();
context.translate (260, 500); </p> <p> // zoomez la hauteur et la largeur du deuxième arbre pour deux fois l'original
context.scale (2, 2);
drawtree (contexte);
context.Restore ();
TournerFaire 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); </p> <p> context.Restore ();
Une méthode d'utilisation de la transformation
// Enregistrer l'état actuel
context.save (); </p> <p> // 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); </p> <p> // Dans la direction de l'axe y, passez la hauteur de l'ombre à 60%
context.scale (1, 0,6); </p> <p> // Remplissez le coffre d'une transparence noire de 20%
context.fillStyle = 'rgba (0, 0, 0, 0,2)';
context.fillrect (-5, -50, 10, 50); </p> <p> // repeindre l'arbre avec l'effet d'ombre existant
CreateCanopypath (contexte);
context.fill (); </p> <p> // Restaurez l'état de toile précédent
context.Restore ();
textecontext.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 (); </p> <p> // La taille de la police est de 60, la police est un impact
context.font = "60px Impact"; </p> <p> // Remplacer la couleur
context.fillStyle = '# 996600';
//Centre
context.textalign = 'Center'; </p> <p> // dessiner du texte
context.fillText («Happy Trails!», 200, 60, 400);
context.Restore ();
ombreLes 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)'; </p> <p> // Déplacez 15px vers la droite et 10px à gauche
context.shadowoffsetx = 15;
context.shadowoffsety = -10; </p> <p> // ombre légèrement floue
context.shadowblur = 2;
Données de pixelscontext.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.