JavaScript - HTMLanvas を使用した場合-jsチュートリアル-php.cn

JavaScript - HTMLanvas を使用した場合

王林

リリース： 2024-07-16 22:51:50

オリジナル

555 人が閲覧しました

こんにちは。Wes Bos の JavaScript30 を使った私の経験の別のエキサイティングな記事へようこそ!おそらくこれまでのコースで一番楽しかったです！この挑戦を始めた後、私は自分の知識がまったく足りなかったので、自分で理解しようとするのではなく、ウェスと一緒にコードを書くことにすぐに決めました。これまで Canvas を使ったことがなかったので、理解できない構文がたくさんありました。ブラウザで独自バージョンの Etch-a-Sketch を作成できるでしょうか? 確かに、それは理解できましたが、彼が完成品として何を望んでいるのかを見て、私は一歩後退しました。

それで、私たちは何をしたのでしょうか？基本的には、HTML5 Canvas で Etch-a-Sketch を作成しました。最も大きな違いは、線を描くときの色とサイズが常に変化することです。嘘はつきません...どうやってこれを実現できたのか、私はまだ完全には理解していません。しかし、私にはかなりまともな考えがあります。

The finished product

上の写真からわかるように、たとえまったく実用的ではなかったとしても、非常にカラフルなデザインが完成しました。基本的に、Canvas は多かれ少なかれ「ペイント」であるようですが、さらに多くの用途があります。今後のプロジェクトでいつ使用するかはわかりませんが、それでも全体としては楽しい演習でした。

ああ、HSL について学ぶのも楽しかったです! 彼は私たちをマザー・エフィングHSLに連れて行き、色合いや色についてもっと学ぶことができました。このサイトにアクセスして、カラーパレットをいじる方法を確認することを強くお勧めします。これをコード内で直接呼び出し、ページ上に描画するときにインクリメントすることで使用しました。

      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--;
        }
      }

ログイン後にコピー

マウスの動きに基づいて線の増加または減少の方向を切り替えることで、線自体のサイズをどのように変更したかもわかります。実際に何が起こっているかだけを考えると、コードの 1 行だけでもまだ混乱しています。つまり、 if (ctx.lineWidth >= 175 || ctx.lineWidth 方向 = !方向;。この行全体が私にはクレイジーです。主に、一定量に達すると自動的にオンになるように設計されています。 ||私も今でも混乱していますし、「!」をどのように使用するのか、なぜ使用するのか理解できません。 JavaScriptで。この投稿を書いた後、これについてさらに詳しく調べますが、誰かがこれらの概念のいずれかをもう少し詳しく説明していただければ、非常に感謝します。

このチャレンジ中に、もう 1 つ大きな発見がありました。それは、JavaScript を記述するときにセミコロンを使用することです。勧められても、実際にはこれまでやったことがありませんでした。行を終了して新しい行を続けるだけで十分だと考えました。 CSS ではセミコロンを使用する必要があり、セミコロンを使用しないと意図したとおりに動作しないことはわかっています。 JavaScript を使用しないことで問題が発生したのはこれが初めてでした。 ctx.ストローク()の後にセミコロンがないため、私のコードは基本的に壊れていました。まあ、それでも機能しましたが、明らかに意図したとおりではありませんでした。何らかの理由で次のコード行に遭遇しましたが、セミコロンによって完全に修正されました。教訓。

全体として、これは楽しい挑戦でした。 HTML5 Canvas でできることのすべてについては、ほんの表面をなぞっただけではありますが、HTML5 Canvas をいじるのはとても楽しかったです。ブラウザ上で必要以上に長く描画し、何が起こるかを確認するために、戻っていくつかの値 (色相の増加方法、線の最大幅など) をいじりました。おそらくこれを自分で再現しようとしても無理でしょうが、数行の JavaScript で何ができるかということに今でもとても興味を持っています!

今日のチャレンジはここまでです。時間があれば、これを自分で試してみることを強くお勧めします。これまでで最も楽しかったです。 JavaScript30 の次回の記事にご注目ください: 14 の必須の開発ツールトリック!
the next lesson!