Il ne peut pas être dessiné directement dans Convas, et il doit être obtenu en utilisant cette méthode.
Suivant.
☆ context.beginpath ()Indique le début d'un nouveau dessin de chemin.
☆ context.ispointinpath (x, y)Déterminez si un point est sur le chemin. Cette méthode ne s'applique pas après la conversion du système de coordonnées.
☆ context.moveto (x, y)Il équivaut à soulever la brosse à partir de la planche à dessin, à quitter la planche à dessin, puis à positionner la pointe au niveau du
Aux coordonnées (x, y), démarrez un nouveau dessin à cette nouvelle position.
☆ context.lineto (x, y)Il équivaut à la pointe de la brosse qui ne quitte pas la planche à dessin, et la pointe de la brosse se déplace de la position de coordonnée actuelle à
Dessinez un segment de ligne aux coordonnées (x, y).
☆ context.stroke ()Après avoir tiré sur Convas, certaines opérations de dessin doivent appeler cette méthode pour permettre au dessin d'être à l'intérieur
Affichage de contenu.
☆ context.save ()Cette méthode sauve l'état actuel des convas, indépendamment des modifications des convas à l'avenir.
Enregistrez simplement l'état Convas avant d'apporter ces modifications et vous pouvez l'appeler plus tard
La méthode context.restore () se rétablit à l'état enregistré. Généralement dessiné dans une nouvelle section
ou l'état d'origine des convas doit être enregistré avant de modifier l'opération (aucun dessin ou changement n'est effectué
), Restaurez-le à son état d'origine une fois une nouvelle opération de tirage ou de modification terminée. ce
Il est également propice aux futures opérations de dessin.
En fait, le contexte de l'environnement de dessin 2D de Canvas a de nombreuses propriétés et certaines méthodes avec
lié à l'état, la valeur de chaque attribut est modifiée (ou une méthode est utilisée pour modifier l'état de dessin),
L'état de dessin change. S'il est enregistré après chaque modification, plusieurs états d'une propriété
Enregistrez-le sous la forme d'une pile, et la partie Restore () peut être appelée plusieurs fois dans l'ordre de la pile.
Retour à l'état enregistré correspondant.
☆ context.pranslate (x, y)Cette méthode déplace l'origine de coordonnées actuelle en (x, y).
☆ Context.Restore ()Restaurez l'état Convas au dernier état sauvé.
☆ context.closepath ()Cette commande est très similaire dans le comportement au lineto
fonction, la différence étant que la destination est
supposé automatiquement être le
origine du chemin. Cependant, le Closepath informe également
la toile que la forme actuelle a fermé ou formé un
zone complètement contenue. Ce sera utile pour l'avenir
remplit et coups.
À ce stade, vous êtes libre de continuer avec plus
Segments sur votre chemin pour créer des sous-repères supplémentaires. Ou vous
peut commencer à tout moment pour recommencer et effacer le chemin
Liste entièrement.
☆ context.fill ();Remplissez le chemin fermé après avoir réglé le style de remplissage. Pas besoin d'appeler cette méthode après l'avoir appelé
Méthode context.stroke ().
☆ Context.Fillrect (x, y, largeur, hauteur)Dessinez et remplissez la zone rectangulaire avec largeur et longueur (largeur, hauteur) à (x, y). Ajuster
Après avoir utilisé cette méthode, vous n'avez pas besoin d'appeler à nouveau la méthode context.stroke ().
☆ Context.strokect (x, y, largeur, hauteur)Dessinez un contour rectangulaire avec la largeur et la longueur (largeur, hauteur) à (x, y).
☆ Context.Clearrect (x, y, largeur, hauteur)La position de nettoyage (le coin supérieur gauche du rectangle) est à (x, y,), et la taille est (largeur, hauteur)
zone rectangulaire.
Supprimer tout contenu de la zone rectangulaire et réinitialiser
à sa couleur d'origine et transparente.
La capacité de nettoyer les rectangles dans la toile est au cœur de
Création d'animations et de jeux à l'aide de l'API HTML5 Canvas. Par
dessinant et nettoyage à plusieurs reprises les sections de la toile, il
est possible de présenter l'illusion de l'animation, et beaucoup
Des exemples de cela existent déjà sur le Web. Cependant, pour
Créer des animations qui fonctionnent en douceur, vous devrez
Utilisez des fonctionnalités d'écrasement et peut-être même un secondaire
toile tamponnée pour minimiser les scintillements causés par
La toile se dégage fréquemment.
☆ context.DrawImage ()Cette méthode a trois surcharges pour dessiner l'image sur le toile. La source d'image peut être
Un cadre de la balise IMG dans la page, l'objet d'image en js et vidéo.
• Context.Drawimage (IMG, X, Y)
Dessinez l'image avec l'image IMG à (x, y). Lorsque la taille de la toile est plus grande que l'image
, l'image entière est dessinée; Lorsque l'image est plus grande que la toile, l'excès est raccourci.
• Context.Drawimage (IMG, X, Y, W, H)
À (x, y), utilisez l'image IMG pour dessiner une zone rectangulaire avec la longueur et la largeur (W, H). image
La taille du séquentiel passera à (w, h).
• Context.Drawimage (IMG, IMGX, IMGY, IMGW, IMGH, CX, CY,
cw, ch)
Prenez une image IMG en tant qu'objet de dessin, et la position sur l'IMG est (IMGX, IMGY
) La zone de taille (IMGW, IMGH) est dessinée en position de toile (CX, CY)
Dessinez la zone de taille (CW, CH).
Une exception est jetée si la zone de recadrage sur l'image est hors de la plage d'images.
• Context.Drawimage (Video, VX, VY, VW, VH, CX, CY, CW, CH)
Prenez un objet vidéo comme un objet de dessin et prenez la position sur la vidéo comme (vx, Vy
) Un cadre de taille (VW, VH), dessine grand en position sur toile (CX, CY)
Zones à petite (CW, CH).
De plus, le premier paramètre de DrawImage () peut également être une autre toile.
☆ Context.getimagedata (x, y, largeur, hauteur)Cette méthode obtient la taille (largeur, hauteur) de la position à l'intérieur de la toile (x, y)
Une zone de pixels, la valeur de retour est un objet imagedata. Imagedata a une largeur,
hauteur et données.
L'attribut de données est un tableau de pixels, et chaque quatre éléments consécutifs du tableau représentent une image
, quatre éléments consécutifs contiennent à leur tour de la couleur RGBA et de la transparence. Quatre éléments consécutifs
Le pixel doit appartenir à un pixel et la position du premier élément n'est pas prise à volonté.
Le réseau de pixels est spécifié dans l'ordre de canevas de haut en bas et de gauche à droite.
Scanner pour obtenir. Le nombre d'éléments dans le tableau de pixels est la largeur * hauteur * 4. Pour obtenir un spécifique
Informations sur les pixels de l'emplacement.
Si vous ouvrez la page Web en utilisant cette méthode en mode fichier local, il ne sera pas normal
Le travail, les erreurs de sécurité se produisent généralement. Vous pouvez télécharger des fichiers sur
Le serveur Web demande ensuite l'accès pour résoudre ce problème. Et, les images impliquées, JS et
Le HTML doit provenir du même nom de domaine. Cependant, IE9 est accessible via des fichiers locaux.
Un exemple est le suivant:
Copier le code