Si vous avez étudié le Web récemment, mais avez déjà réussi à voir divers beaux effets sur le site, comme un système de particules ou des jeux développés sur toile, vous étiez intrigué, mais c'est très effrayant d'apprendre quelque chose de nouveau, alors je suis prêt à vous le démontrer comme dans 50 lignes de code js vous pouvez faire quelque chose d'intéressant sur canvas'e.
Je dirai tout de suite, je veux expliquer la logique du travail avec la toile. Le code est très simple, j'espère que cela vous encourage à apprendre des outils tels que la toile. C'est également une très bonne pratique pour un programmeur JS débutant.
Passons au code. Écrivons une simple génération de carrés de différentes couleurs sur la toile. Vous pouvez voir tout le code à la fois, puis je vais l'expliquer.
Que devons-nous faire?
- Obtenez le canevas et son contexte 2D (si vous ne l'avez pas déjà fait, ne vous inquiétez pas, cela fait 2 lignes de code)
- Rendons notre toile un peu adaptative
- Définissez les variables et les propriétés dont nous avons besoin
- Dessiner un élément sur toile
- Lors du redimensionnement, modifiez la taille du canevas
Le travail sur toile peut être divisé en 3 étapes.
- Définition des propriétés dont nous avons besoin (épaisseur du stylo, couleur de remplissage, couleur de ligne et autres propriétés)
- Dessiner un élément
- Si nous faisons quelque chose de dynamique. Par exemple, un jeu, une animation, un système de particules et d'autres éléments, puis nous créons un cycle et y déposons le rendu (rendu) de nos objets
Eh bien, revenons à notre code.
1. Comme je l'ai dit, deux lignes de code et nous pouvons manipuler le canevas
Obtenir un élément par Id est l'API de navigateur standard, mais getContext est une méthode du canevas lui-même. Vous pouvez obtenir un contexte 3D, mais pour le moment nous n'en avons pas besoin.
2. Le deuxième point, le troisième et le cinquième, je m'unirai parce que les variables sont déclarées + le code est le même ici. Vous pouvez même créer une fonction distincte car la duplication de code est déjà en cours, ce qui est mauvais.
Nous aurons besoin des variables largeur et hauteur plus loin. N'oubliez pas d'appeler la fonction ReSize après avoir reçu le contexte du canevas.
Nous avons besoin d'un autre objet d'options. Nous y stockons tous les paramètres.
l'opacité - la vitesse à laquelle nos éléments seront écrasés sur canvas'e
count - le nombre de cubes que nous allons créer en un seul passage de la fonction
fps - Je pense qu'il n'y a pas besoin d'expliquer pourquoi ... la vérité est étrange ...
couleur - ici se trouve le masque qui représente notre palette de couleurs
la teinte est une tonalité de couleur dans la plage de 0 à 360. L'image sera plus claire
divisionSpeed est une variable avec laquelle nous pouvons ajuster le taux de changement de couleur
4. Il ne nous reste plus qu'à créer une boucle, une fonction de rendu et à tout appeler.
Nous créons la fonction Init, elle est nécessaire pour initialiser la boucle. La fenêtre a une excellente méthode requestAniimationFrame () qui vous permet de boucler l'appel à la fonction dont nous avons besoin. Également à l'intérieur d'Init, nous appelons la fonction Step () dans laquelle le code de rendu de nos cubes est stocké.
Nous allons faire un rendu en boucle pour dessiner 100 éléments à la fois. À l'intérieur du cycle, la première chose que nous faisons est de définir une condition qui nous permet de choisir une tonalité de couleur dans la plage de 0 à 360, ainsi les couleurs de nos cubes changeront. Les deux lignes suivantes peuvent être combinées en une seule, définissant ainsi directement la couleur de remplissage de la figure. ctx.fillStyle vous permet de définir la couleur de remplissage et ctx.fillRect (point x, point y, largeur, hauteur) vous permet de dessiner une forme. Nous fixons une hauteur aléatoire avec une largeur, mais dans la gamme de nos tailles.
Deux lignes après la boucle, c'est pour effacer l'écran. Vous savez déjà que fillstyle vous permet de définir la couleur de remplissage, nous définissons la couleur blanche avec une opacité égale à l'opacité de l'objet options. Et nous commençons également à dessiner la figure de nettoyage à partir du point 0: 0 avec des dimensions égales aux tailles de notre toile.
Nous ne pouvons appeler la fonction Init que n'importe où dans notre programme.
Si vous doutez encore que vous pouvez faire de belles choses avec de la toile, voici un exemple.
Si vous êtes intéressé par la toile, il est temps de continuer à étudier cette technologie. Je ne peux pas vous conseiller sur un bon article d'étude. c'était très ennuyeux pour moi de lire sur la toile et pour moi-même je n'ai rien mis de favori. Et sur YouTube, il y a très peu de bonnes vidéos sur toile, et celles qui peuvent être regardées ne contiennent que 10% des informations nécessaires et 30% d'eau, et le reste du temps, elles écrivent du code avec des erreurs et le conçoivent en déplacement. À mon avis, la meilleure chose est de prendre un exemple simple et d'essayer de le mettre en œuvre vous-même.