JavaScript- un avec HTMLanvas

Bonjour et bienvenue dans un autre épisode passionnant de mon expérience avec JavaScript30 de Wes Bos ! C’est probablement le cours le plus amusant que j’ai eu jusqu’à présent ! Après avoir commencé ce défi, j'ai rapidement décidé de coder avec Wes au lieu d'essayer de le comprendre moi-même car j'étais vraiment hors de mes connaissances. Je n'ai jamais travaillé avec Canvas auparavant et il y avait beaucoup de syntaxe que je ne comprenais pas. Puis-je éventuellement créer ma propre version d'un Etch-a-Sketch dans un navigateur ? Ouais, bien sûr, je pourrais comprendre ça, mais après avoir vu ce qu'il voulait comme produit fini, j'ai pris du recul.

Alors, qu’est-ce qu’on a fait ? Fondamentalement, nous avons créé un Etch-a-Sketch dans HTML5 Canvas. La plus grande différence était que lorsque vous dessiniez, les couleurs et la taille de la ligne changeaient constamment. Je ne vais pas mentir... comment nous avons réussi à y parvenir, je ne comprends toujours pas complètement. Mais j'ai une assez bonne idée.

Comme vous pouvez le voir sur la photo ci-dessus, nous nous sommes retrouvés avec un design extrêmement coloré, même s'il n'est pas du tout pratique. Fondamentalement, il semble que Canvas soit plus ou moins une "peinture" mais avec plus d'utilisations. Je ne vois pas vraiment quand je l'utiliserais pour des projets à venir, mais c'était quand même un exercice amusant dans son ensemble.

Oh et apprendre le HSL était cool aussi ! Il nous a emmenés chez Mother Effing HSL pour que nous puissions en apprendre davantage sur les teintes et les couleurs. Je recommanderais certainement d'aller sur ce site pour voir comment vous pouvez jouer avec la palette de couleurs. Nous l'avons utilisé en l'appelant directement dans notre code et en l'incrémentant au fur et à mesure que nous dessinions sur la page.

      let isDrawing = false;
      let lastX = 0;
      let lastY = 0;
      let hue = 0;
      let direction = true;

      function draw(e) {
        if (!isDrawing) return;
        console.log(e);
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];
        hue++;
        if (hue >= 360) {
          hue = 0;
        }
        if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
          direction = !direction;
        }
        if (direction) {
          ctx.lineWidth++;
        } else {
          ctx.lineWidth--;
        }
      }

Vous pouvez également voir comment nous avons modifié la taille de la ligne elle-même en changeant le sens de son incrémentation ou de sa décrémentation en fonction du mouvement de la souris. Une ligne du code me rend encore confus en fonction de ce qui se passe réellement. Cela étant if (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
direction = !direction;. Toute cette ligne est folle pour moi. Surtout comment il est conçu pour se retourner sur lui-même après avoir atteint un certain montant. || ça me confond toujours aussi et je ne suis pas convaincu de savoir comment ou pourquoi vous utiliseriez un ! en JavaScript. J'examinerai cela plus en détail après avoir écrit cet article, mais si quelqu'un pouvait m'expliquer un peu plus l'un ou l'autre de ces concepts, je l'apprécierais grandement.

J'ai eu une autre révélation assez importante au cours de ce défi. Ce serait l'utilisation de points-virgules lors de l'écriture de JavaScript. Je n'ai vraiment jamais fait cela auparavant, même si cela m'a été suggéré. Je pensais qu'il suffirait de terminer une ligne et de continuer sur une nouvelle ligne. Je sais que vous devez utiliser des points-virgules en CSS et que si vous ne le faites pas, rien ne fonctionnera comme vous le souhaitez. C'était la première fois que j'avais un problème avec JavaScript en ne les utilisant pas. En n'ayant pas de point-virgule après ctx.Stroke(), mon code s'est cassé. D'accord, cela a toujours fonctionné, mais certainement pas comme prévu. Pour une raison quelconque, il s'est heurté à la ligne de code suivante, mais le point-virgule a complètement corrigé ce problème. Leçon apprise.

Dans l’ensemble, c’était un défi amusant. J'ai beaucoup aimé jouer avec HTML5 Canvas, même si j'ai à peine effleuré la surface de tout ce que vous pouvez en faire. J'ai dessiné sur mon navigateur plus longtemps que je n'aurais dû et je suis également revenu en arrière et j'ai modifié certaines valeurs (c'est-à-dire comment la teinte augmenterait, la largeur maximale des lignes, etc.) juste pour voir ce qui se passerait. Je ne pourrais probablement pas recréer cela par moi-même si j'essayais, mais je suis toujours aussi fasciné par ce qui peut être fait avec quelques lignes de JavaScript !

C'est tout pour le défi d'aujourd'hui. Si vous avez le temps, je vous suggère fortement d'essayer celui-ci par vous-même, car c'était de loin le plus amusant que j'ai eu jusqu'à présent ! Soyez à l'affût de mon prochain épisode de JavaScript30 avec : 14 astuces incontournables en matière d'outils de développement !

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!