JavaScript- un Dengan HTMLanvas

Helo dan selamat datang kembali ke satu lagi ansuran menarik pengalaman saya dengan JavaScript30 Wes Bos! Ini mungkin yang paling menyeronokkan saya dengan kursus setakat ini! Selepas memulakan cabaran ini, saya dengan cepat memutuskan untuk membuat kod bersama-sama dengan Wes dan bukannya cuba memikirkannya sendiri kerana saya sangat jauh dari kedalaman saya. Saya tidak pernah bekerja dengan Kanvas sebelum ini dan terdapat banyak sintaks yang saya tidak faham. Bolehkah saya membuat versi Etch-a-Sketch saya sendiri dalam penyemak imbas? Ya pasti, saya boleh memikirkannya, tetapi selepas melihat apa yang dia mahukan sebagai produk siap saya mengambil langkah ke belakang.

Jadi apa yang kami lakukan? Pada asasnya kami telah membuat Etch-a-Sketch dalam Kanvas HTML5. Perbezaan terbesar ialah apabila anda melukis warna dan saiz garisan akan sentiasa berubah. Saya tidak akan berbohong...bagaimana kami berjaya melakukan ini saya masih tidak faham sepenuhnya. Tetapi saya mempunyai idea yang cukup baik.

Seperti yang anda lihat dari gambar di atas, kami mempunyai reka bentuk yang sangat berwarna-warni, walaupun ia tidak praktikal sedikit pun. Pada asasnya, nampaknya Kanvas lebih kurang "cat" tetapi dengan lebih banyak kegunaan. Saya tidak benar-benar melihat bila saya akan menggunakannya untuk mana-mana projek yang akan datang tetapi ia masih merupakan latihan yang menyeronokkan secara keseluruhan.

Oh dan belajar tentang HSL juga bagus! Dia membawa kami ke mother effing HSL supaya kami dapat mengetahui lebih lanjut tentang warna dan warna. Saya pasti akan mengesyorkan pergi ke laman web ini untuk melihat bagaimana anda boleh mengacaukan palet warna. Kami menggunakan ini dengan memanggilnya secara terus dalam kod kami dan menambahnya semasa kami melukis pada halaman.

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

Anda juga boleh melihat cara kami menukar saiz garisan itu sendiri dengan menukar arah cara garis itu sama ada bertambah atau berkurang berdasarkan pergerakan tetikus. Satu baris kod masih mengelirukan saya hanya berdasarkan berapa banyak yang sebenarnya berlaku. Iaitu jika (ctx.lineWidth >= 175 || ctx.lineWidth <= 1) {
arah = !arah;. Seluruh baris ini gila bagi saya. Selalunya bagaimana ia direka untuk membalikkan dirinya sendiri selepas mencapai jumlah tertentu. || masih mengelirukan saya juga dan saya tidak dijual tentang bagaimana atau mengapa anda akan menggunakan ! dalam JavaScript. Saya akan meneliti perkara ini lebih lanjut selepas saya menulis siaran ini, tetapi jika sesiapa boleh menerangkan salah satu daripada konsep ini kepada saya dengan lebih lanjut, saya amat menghargainya.

Ada satu lagi pendedahan yang cukup besar yang saya dapat semasa cabaran ini. Itu akan menjadi penggunaan koma bertitik semasa menulis JavaScript. Saya benar-benar tidak melakukan ini sebelum ini, walaupun ia telah dicadangkan kepada saya. Saya fikir bahawa hanya menamatkan baris dan meneruskan baris baharu sudah memadai. Saya tahu bahawa anda perlu menggunakan koma bertitik dalam CSS dan jika anda tidak berbuat apa-apa tidak akan berfungsi seperti yang anda mahukan. Ini adalah kali pertama saya mengalami masalah dengan JavaScript kerana tidak menggunakannya. Dengan tidak mempunyai koma bertitik selepas ctx.stroke() kod saya pada dasarnya rosak. Okey, ia masih berkesan, tetapi pastinya tidak seperti yang dimaksudkan. Atas sebab tertentu ia berlari ke dalam baris kod berikut tetapi titik koma membetulkannya sepenuhnya. Pengajaran.

Secara keseluruhannya ini adalah cabaran yang menyeronokkan. Saya sangat seronok bermain-main dengan HTML5 Canvas walaupun saya hampir tidak menconteng permukaan berkenaan dengan semua yang anda boleh lakukan dengannya. Saya melukis pada penyemak imbas saya lebih lama daripada yang sepatutnya dan juga kembali dan mengacaukan beberapa nilai (iaitu bagaimana warna akan meningkat, lebar maksimum garisan, dll..) hanya untuk melihat apa yang akan berlaku. Saya mungkin tidak dapat mencipta semula ini sendiri jika saya mencuba tetapi saya masih terpesona tentang perkara yang boleh dilakukan dengan beberapa baris JavaScript!

Itu sahaja untuk cabaran hari ini. Jika anda mempunyai masa, saya sangat mengesyorkan mencuba yang ini untuk diri sendiri kerana ia adalah yang paling menyeronokkan yang saya alami setakat ini! Nantikan ansuran JavaScript30 saya yang seterusnya dengan: 14 Helah Alat Pembangun Mesti Tahu!

Atas ialah kandungan terperinci JavaScript- un Dengan HTMLanvas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!