Canvas HTML
Les fonctionnalités fournies par HTML canvas sont plus primitives, adaptées au traitement pixel par pixel, au rendu dynamique et au dessin de grandes quantités de données.
Qu'est-ce que le canevas HTML
HTML5 La balise <canvas> est utilisée pour dessiner des graphiques dynamiquement via des scripts (généralement JavaScript).
Cependant, l'élément <canvas> n'a pas de fonction de dessin propre (il est simplement un conteneur de graphiques)-Il est nécessaire d'utiliser des scripts pour dessiner effectivement les graphiques.
La méthode getContext() renvoie un objet qui fournit des méthodes et des propriétés pour dessiner sur le canevas.
Cette référence expliquera getContext("2d") les propriétés et méthodes, qui peuvent être utilisées pour dessiner du texte, des lignes, des boîtes, des cercles, etc. sur le canevas
Prise en charge du navigateur
IEFirefoxOperaChromeSafari
Internet Explorer 9、Firefox、Opera、Chrome et Safari prennent en charge les attributs et méthodes de la balise <canvas>.
Attention:Internet Explorer 8 et les versions d'IE plus anciennes ne prennent pas en charge l'élément <canvas>.
Couleur, style et ombre
| Propriété | Description |
| fillStyle | Définir ou renvoyer la couleur, la dégradation ou le motif utilisée pour le remplissage. |
| strokeStyle | Définir ou renvoyer la couleur, la dégradation ou le motif utilisée pour le trait. |
| shadowColor | Définir ou renvoyer la couleur de l'ombre. |
| shadowBlur | Définir ou renvoyer le niveau de flou de l'ombre. |
| shadowOffsetX | Définir ou renvoyer la distance horizontale entre l'ombre et la forme. |
| shadowOffsetY | Définir ou renvoyer la distance verticale entre l'ombre et la forme. |
Style de ligne
| Propriété | Description |
| lineCap | Définit ou retourne le style de pointe de fin de ligne. |
| lineJoin | Définit ou retourne le type de coin créé lors de l'intersection des lignes. |
| lineWidth | Définit ou retourne la largeur de ligne actuelle. |
| miterLimit | Définit ou retourne la longueur maximale de l'angle de saut. |
Rectangle
| Méthode | Description |
| rect() | Crée un rectangle. |
| fillRect() | Dessine un rectangle "rempli". |
| strokeRect() | Dessine un rectangle (sans remplissage). |
| clearRect() | Efface les pixels spécifiés dans le rectangle donné. |
Chemins
| Méthode | Description |
| fill() | Remplit le dessin actuel (chemin). |
| stroke() | Trace le chemin défini. |
| beginPath() | Commence un chemin ou réinitialise le chemin actuel. |
| moveTo() | Déplace le chemin au point spécifié sur le canevas sans créer de ligne. |
| closePath() | Crée un chemin qui retourne au point de départ. |
| lineTo() | Ajoute un nouveau point, puis crée une ligne dans le canevas de ce point au point spécifié en dernier. |
| clip() | Coupe une région de forme et de taille arbitraires du canevas d'origine. |
| quadraticCurveTo() | Crée une courbe Bézier en deux points. |
| bezierCurveTo() | Crée une courbe Bézier en trois points. |
| arc() | Crée un arc/Courbe (utilisé pour créer un cercle ou une partie de cercle). |
| arcTo() | Crée un arc entre deux tangentes./Courbe |
| isPointInPath() | Retourne true si le point spécifié se trouve dans le chemin actuel, sinon retourne false. |
Transformation
| Méthode | Description |
| scale() | Agrandit ou réduit le dessin actuel. |
| rotate() | Tourne le dessin actuel. |
| translate() | Remap la position (0,0) sur le canevas. |
| transform() | Remplace la matrice de transformation actuelle du dessin. |
| setTransform() | Réinitialise la transformation actuelle à la matrice unitaire. Ensuite, exécutez transform(). |
Texte
| Propriété | Description |
| font | Définit ou retourne les propriétés de police actuelles du contenu du texte. |
| textAlign | Définit ou retourne l'alignement actuel du contenu du texte. |
| textBaseline | Définit ou retourne la ligne de base actuelle utilisée pour le dessin du texte. |
| Méthode | Description |
| fillText() | Dessiner du texte "rempli" sur le canevas. |
| strokeText() | Dessiner du texte sur le canevas (sans remplissage). |
| measureText() | Retourne un objet contenant la largeur spécifiée du texte. |
Dessin d'image
| Méthode | Description |
| drawImage() | Dessiner une image, un canevas ou une vidéo sur le canevas. |
Opérations sur les pixels
| Propriété | Description |
| width | Retourner la largeur de l'objet ImageData. |
| height | Retourner la hauteur de l'objet ImageData. |
| data | Retourner un objet qui contient les données d'image de l'objet ImageData spécifié. |
| Méthode | Description |
| createImageData() | Créer un nouveau, ImageData vide. |
| getImageData() | Retourner un objet ImageData, qui contient les données d'image de l'objet ImageData spécifié sur le canevas. |
| putImageData() | Remettre les données d'image (de l'objet ImageData spécifié) sur le canevas. |
Composition
| Propriété | Description |
| globalAlpha | Définir ou renvoyer la valeur alpha ou la transparence actuelle du dessin. |
| globalCompositeOperation | Définir ou renvoyer la manière dont l'image nouvelle est dessinée sur l'image existante. |
Autres
| Méthode | Description |
| save() | Sauvegarder l'état actuel de l'environnement. |
| restore() | Retour à l'état et aux propriétés de l'itinéraire sauvegardé précédemment. |
| createEvent() | |
| getContext() | |
| toDataURL() | |