Organisez quelques nouvelles caractéristiques de HTML5 et des propriétés communes de la toile

Cet article présente principalement de nouvelles fonctionnalités de HTML5 et le tri des propriétés communes de la toile. L'API Canvas est un contenu important utilisé dans HTML5 pour dessiner des graphiques. Les amis qui en ont besoin peuvent se référer au 1. Types de contenu HTML5 suivants

indice

L'API des sélecteurs n'est pas seulement pratique. Lorsqu'il s'agit de traverser le DOM, l'API des sélecteurs est généralement plus rapide que l'API de recherche de nœuds enfants précédente. Pour implémenter une feuille de style rapide, le navigateur optimise hautement la correspondance du sélecteur.

Le canevas est essentiellement un canevas bitmap, où les graphiques dessinés dessus ne sont pas évolutifs et ne peuvent pas être agrandis et réduits comme une image SVG. De plus, les objets dessinés avec Canvas n'appartiennent pas à la structure DOM de la page ou à tout espace de noms.

Programmation avec toile, vous devez d'abord obtenir son contexte. Exécutez ensuite des actions dans le contexte et appliquez enfin ces actions au contexte.

Les coordonnées de la toile commencent du coin supérieur gauche, l'axe x s'étend vers la droite dans le sens horizontal (par des pixels) et l'axe y s'étend dans la direction verticale. Le point avec les coordonnées du coin supérieur gauche x = 0 et Y-0 est appelé l'origine.

Comme la plupart des éléments HTML, l'élément de toile peut également ajouter des frontières en appliquant CSS, en marge intérieure, en marges extérieures, etc., et certains attributs CSS peuvent également être hérités par des éléments dans la toile.

Correction - Dans le système de dessin, l'instruction est la transformation - peut être appliquée séquentiellement, combinée ou modifiée à volonté lors de l'application. Les résultats de chaque opération de dessin doivent être corrigés via la couche de correction avant d'être affichée sur le canevas. Bien que cela ajoute de la complexité supplémentaire, il ajoute des fonctionnalités plus puissantes au système de dessin, qui peut prendre en charge le traitement d'image en temps réel comme les outils d'édition d'image traditionnels actuels, de sorte que la complexité de cette partie du contenu de l'API est nécessaire.

Il y a une suggestion importante concernant le code réutilisable: généralement, le dessin doit commencer à partir de l'origine (0,0 points dans le système de coordonnées), appliquer une transformation (mise à l'échelle, traduction, rotation, etc.), puis modifier en continu le code jusqu'à ce que l'effet souhaité soit atteint.

Fonction de chemin de contexte

(1) MoveTo (x, y): ne dessine pas, déplacez simplement la position actuelle vers la nouvelle coordonnée de destination (x, y);

(2) 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.

(3) ClosePath (): Le comportement de cette fonction est très similaire à LineTo. La seule différence est que RostEpaht utilisera automatiquement la coordonnée de démarrage du chemin comme coordonnée cible. ClosePath informe également Canvas que la figure actuellement dessinée a été fermée ou a formé une zone complètement fermée, ce qui est très utile pour les remplissages et les coups futurs.

(4) Strokect (): tracez le contour du rectangle en fonction de la position et des coordonnées données.

(5) ClearRect (): Effacer tout le contenu de la zone rectangulaire et le restaurer à son état initial, c'est-à-dire une couleur transparente.

(6) QuadraticCurveto (): Le point de départ de la fonction dessinant une courbe est la coordonnée actuelle, avec deux ensembles de bords (x, y). Le deuxième groupe fait référence au point final de la courbe. Le premier groupe représente les points de contrôle. Le soi-disant point de contrôle est situé à côté de la courbe (pas au-dessus de la courbe), et son effet équivaut à créer une force de tension sur la courbe. En ajustant la position du point de contrôle, la courbure de la courbe peut être modifiée.

Les images augmentent la complexité des opérations sur toile: vous devez attendre que l'image soit pleinement chargée avant de pouvoir fonctionner. Les navigateurs chargent généralement des images de manière asynchrone pendant que le script de page est exécuté. Si la vue rend l'image sur la toile avant qu'elle ne soit complètement chargée, la toile n'affichera aucune image.

Le gradient fait référence à l'utilisation d'algorithmes d'échantillonnage par étapes sur les ensembles de couleurs et à l'application des résultats sur les styles de trait et les styles de remplissage.

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 dans le contexte.

Pour définir la couleur à afficher, utilisez la fonction addColOrStop sur l'objet gradient. Cette fonction permet de spécifier deux paramètres: couleur et décalage. Les paramètres de couleur sont les couleurs que les développeurs souhaitent utiliser lorsqu'ils sont caressés ou remplis à des positions de décalage. Le décalage est une valeur comprise entre 0,0 et 1,0, ce qui représente la distance de la distance pour changer le long de la ligne de gradient.

En plus des gradients linéaires, l'API HTML5 Canvas prend également en charge les gradients radioactifs. Le soi-disant gradient radioactif signifie que la couleur change bien dans la zone conique entre deux cercles spécifiés. Les points de terminaison des couleurs utilisés pour les gradients radioactifs et les gradients linéaires sont les mêmes.