Bonjour mes amis!Cet article est une petite sélection d'exemples de travail avec l'API Canvas, qu'il est utile de consulter si nécessaire pour rappeler le matériel étudié.Ce n'est pas un guide pour travailler avec le canevas, mais seulement une démonstration de ses capacités.Pour moi, c'est aussi une sorte de sous-total dans l'étude de la toile.Le code est divisé en blocs de bac à sable séparés, qui sont placés sous la «coupe» pour plus de lisibilité.Quelques points importants.La largeur et la hauteur de la toile sont mieux déterminées à l'aide des attributs:<canvas width="300" height="300"></canvas>
Si nous voulons que toute la zone de visualisation soit une toile, nous procédons comme suit:const width = canvas.width = innerWidth
const height = canvas.height = innerHeight
Je définis généralement la toile et le contexte de dessin en deux dimensions comme suit:const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')
Assez de mots.Commençons par des formes simples.
Un cercle:
Courbes de Bézier:
Courbes quadratiques:
Faisons quelques expériences.
Couleur de la ligne:
La couleur de remplissage:
Transparence (canal alpha):
Transparence (RGBA):
Nous continuons.
Mesures de texte (police):
Nous implémentons plusieurs fonctions.
Fonction de dessin de polygone:
Fonction de dessin de flocon de neige:
Fonction d'habillage de texte:: .
La fonction d'obtention des coordonnées du curseur:
Nous continuons.
Déterminez la couleur de l'image:
Dessinez l'icône de démarrage:
Nous implémentons le suivi du curseur:
Créez un texte interactif:
Voir également:Merci pour votre temps. J'espère que cela a été bien dépensé.