Résumé sur le canevas HTML

L'élément

HTML5 est utilisé pour dessiner des graphiques, ce qui se fait via des scripts (généralement JavaScript). La balise est simplement un conteneur graphique et vous devez utiliser un script pour dessiner des graphiques. , vous pouvez utiliser Canva pour dessiner des chemins, des cases, des cercles, des personnages et ajouter des images de différentes manières.

Recommandé : [Cours] Dessin et animation sur toile avec effet de compte à rebours éblouissant

Introduction au cours : La toile, comme son nom l'indique, est une toile définie sur le navigateur. Mais Canvas n'est pas seulement un élément, c'est un ensemble d'interfaces de programmation. Son apparence a dépassé l'intention originale de conception basée sur les documents du Web. Vous pouvez l’utiliser pour développer de nombreux contenus de rêve, permettant aux programmeurs de libérer pleinement leur créativité !

1. Douche rectangulaire HTMLcanvas

Introduction : HTMLcanvas Tableau rectangulaire Rain est exécuté sur le canevas. Obtenez le plein écran de l'environnement de dessin. Obtenez la largeur de l'écran et la hauteur de l'écran pour déterminer la boucle de colonne. partie Javascript. Cet article se termine ici. Je crois toujours en ce monde, il est plein de beauté et d’espoir, allez !

2. Exemple de code détaillé pour démarrer le canevas HTML5 (image)

Introduction : 1) Objet HTMLCanvasElement Membres : height - correspond à l'attribut height de l'élément canvas ; width - correspond à l'attribut width de l'élément canvas ; getContext() - renvoie le contexte de dessin du canevas 2) Dessinez un rectangle : fillRect(x,y,w, h) ——Dessinez un rectangle plein ; StrokeRect(x,y,w,h)——Dessinez un rectangle creux

3 graphique dynamique en toile

<.> Les fonctions puissantes de Canvas en font une partie très importante du HTML5. Quant à ce que c'est, je n'ai pas besoin de le présenter ici. Les graphiques visuels sont l’une des manifestations des puissantes fonctions du canevas.

Il existe désormais de nombreux plug-ins de graphiques matures implémentés à l'aide de Canvas Chart.js, ECharts, etc. qui peuvent créer des graphiques magnifiques et sympas et couvrir presque toutes les implémentations de graphiques.

4.

Animation H5 - un exemple de progression du dessin sur toile d'un cercle

La première étape consiste à dessiner un cercle complet avec une couleur personnalisée, et la seconde L'étape consiste à dessiner un cercle intérieur, son rayon doit être plus petit que le cercle extérieur.

La dernière étape consiste à dessiner le troisième cercle en fonction du pourcentage, et la couleur peut être personnalisée.
Pour réaliser la troisième étape du dessin dynamique, ajoutez simplement une fonction de minuterie, tracez une distance de temps en temps et définissez un seuil
Quand elle est supérieure à ce seuil, effacez la minuterie, ce Le seuil est en fait la valeur en pourcentage à afficher. Chaque fois que vous dessinez 0,01.
Remarque : lorsque vous dessinez dans le minuteur, vous devez dessiner le cercle intérieur dans la deuxième étape, et le cercle vide est également dessiné dans le minuteur.

5.

Canvas implémente l'effet de loupe

Ici, nous utilisons la position de la souris comme point central de la zone agrandie (la loupe se déplace lorsque la souris bouge), car le canevas a besoin de connaître les coordonnées du coin supérieur gauche ainsi que la largeur et la hauteur de la zone lors du dessin d'une image, nous calculons donc ici la plage de la zone

6.

Tutoriel de transfert de toile pour des exemples d'images

Parfois, nous souhaitons stocker la toile dessinée en tant qu'image locale. Que devons-nous faire ? Canvas fournit une méthode importante pourDataURL(. ), qui peut enregistrer les données dans le canevas. Le motif est converti en une image png codée en base64 ou dans un autre format (en fonction du paramètre de type de mine que vous avez transmis), puis les données de l'URL de données sont renvoyées. Voyons ensuite comment cela est mis en œuvre.

Questions et réponses connexes :

1.

javascript - Demander de l'aide pour le problème de la mosaïque de dessin sur toile, la couleur est toujours inexacte

2. .

javascript - Problème de scintillement lors de l'utilisation du canevas pour changer d'image.

[Recommandations associées]

1.

[Cours] Horloge de dessin sur toile

2

La toile met en œuvre le dessin de l'effet Pacfish<.>3.

La toile obtient un effet de flocon de neige dynamique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!