Tutorial lukisan kanvas HTML5 analisis kes_html5 kemahiran tutorial

Walaupun semua orang memanggil Canvas sebagai label baharu HTML5, nampaknya Canvas ialah pengetahuan baharu tentang bahasa HTML, tetapi sebenarnya lukisan Kanvas dilakukan melalui JavaScript. Oleh itu, jika anda ingin mempelajari lukisan Kanvas, anda mesti mempunyai asas Javascript.
Selain itu, apabila bercakap tentang lukisan, sentiasa ada beberapa istilah imej dan mata pengetahuan, jadi jika anda mempunyai pengalaman dalam lukisan atau seni, lebih mudah untuk belajar Kanvas.
Kanvas bermaksud kanvas. Kanvas dalam Html5 benar-benar hampir serupa dengan kanvas dalam kehidupan sebenar. Jadi melihatnya sebagai kanvas fizikal boleh mempercepatkan pemahaman.

Kanvas
Untuk melukis dengan kanvas, pertama sekali, anda memerlukan "kanvas". Jika anda tidak mempunyai kanvas dalam rak buku anda, anda boleh membeli gulungan dan meletakkannya di sana. Sudah tentu, kita tidak perlu membelanjakan wang untuk membelinya di halaman web, kita hanya boleh menulis kanvas, sama seperti:

Salin kod

Kodnya adalah seperti berikut:

/canvas>

Teks dalam label adalah untuk penyemak imbas yang tidak menyokong kanvas dan mereka yang menyokongnya tidak akan dapat melihatnya.

Nota: Perlu disebutkan ciri-ciri kanvas ini seperti IMG, ia mempunyai dua atribut asli, iaitu lebar dan tinggi, kerana ia juga merupakan html elemen, jadi Dia juga boleh menggunakan CSS untuk menentukan lebar dan tinggi, tetapi pastikan anda ambil perhatian: lebar dan tingginya sendiri berbeza daripada lebar dan ketinggian yang ditakrifkan melalui CSS!
Kami menggunakan JS untuk menukar lebar dan ketinggian asli Kanvas, seperti berikut:

Salin kod

The kod adalah seperti berikut:

canvas.width= 400
canvas.height = 300

Tetapi menggunakan JS untuk menukar lebar dan ketinggian Kanvas dengan mengendalikan CSS adalah seperti ini:

Salin kod

Kod adalah seperti berikut:

kanvas .style.width = '400px'
canvas.style.height = '300px'

Dapat dilihat bahawa perbezaan tatabahasa adalah jelas. Malah perbezaannya lebih jelas.
Apakah perbezaan antara mereka?
Sebagai contoh, pada kanvas dengan lebar 1000 piksel, anda melukis garis menegak di sebelah kiri kanvas dengan lebar 100 piksel. Pada masa ini, anda menetapkan lebar kanvas itu sendiri kepada 500, yang bersamaan dengan mengklik pada separuh kanan kanvas, tetapi lebar garis menegak masih 100 pada masa ini.
Tetapi jika anda menukar lebar kanvas kepada 500 melalui CSS, ia bersamaan dengan memerah kanvas daripada 1000 kepada 500, jadi lebar garis menegak menjadi 50.
(Ini hanyalah situasi teori, dalam amalan Apabila menetapkan lebar asli kanvas, ia akan mengosongkan kandungan yang dilukis )
Lebar dan ketinggian kanvas itu sendiri adalah sifat kanvas itu sendiri, dan lebar dan tinggi yang diberikan oleh css boleh dianggap. sebagai penskalaan Jika anda menskalakannya terlalu santai, grafik pada kanvas mungkin tidak dapat anda kenali.
Jadi, berikut ialah cadangan: Melainkan terdapat keadaan khusus, jangan gunakan css untuk menentukan lebar dan ketinggian Kanvas.
Kanvas ada di sana, sekarang mari kita keluarkan:

Salin kod

Kodnya adalah seperti berikut:

var cvs = document.getElementById('cvs');

Berus

Sekarang dah ada kanvas, kalau nak graffiti di atasnya sudah tentu perlukan pen. Kaedah mendapatkan pen daripada kanvas adalah seperti berikut:

Salin kod

Kodnya adalah seperti berikut:

var ctx = cvs.getContext('2d');
Die getContext-Methode wird verwendet, um den Stift abzurufen, aber es gibt hier noch einen weiteren Parameter: 2d Was bedeutet das? Dies kann als Pinseltyp angesehen werden.
Da es 2D gibt, wird es dann auch 3D geben? Ich schätze, das wird es in Zukunft geben, aber nicht jetzt. Lassen Sie uns also zuerst diesen 2D-Stift verwenden.
Können wir also noch ein paar Stifte in Reserve legen? Die Antwort ist nein.
Ich möchte eine Frage stellen: Wie viele Stifte verwenden Sie gleichzeitig beim Zeichnen? Ich glaube, dass 99,9 % der Menschen nur eine verwenden können. Obwohl einige Kampfkunstmeister wie Xiao Longnu mit zwei Händen gleichzeitig zeichnen können, ist das für normale Menschen doch sehr unrealistisch, nicht wahr?
Jetzt können Sie erleichtert sein, denn der Canvas-Tag von HTML5 unterstützt nur die gleichzeitige Verwendung eines Stifts!
Einige Schüler, die mit dem Schreiben von JS besser vertraut sind, möchten vielleicht einen Streich spielen: Ich kann die vorherige Methode zum Erhalten von Pinseln verwenden, um ein paar Stifte mehr zu bekommen, ist das nicht genug? !

Zum Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt :

var con = cvs.getContext('2d');
var ctx = cvs.getContext('2d');

Hahahaha, es scheint erfolgreich zu sein, aber das habe ich vor dem Test nicht gedacht, sondern tatsächlich war es nur eine Illusion!
Weil ich entdeckt habe, dass, wenn ich einen der Stifte in rote Tinte tauchte, der andere Stift automatisch in rote Tinte getaucht wurde! Denn die beiden Stifte sind eins! Scheiße.
Wenn Sie verschiedene Farben zeichnen müssen, können Sie diesen einzigen „Stift“ immer wieder in neue Farben tauchen.
Das ist eigentlich kein Vorteil, sondern ein Fehler, den Sie in Zukunft erkennen werden.

Koordinaten
Die 2D-Welt ist eine Ebene. Um einen Punkt auf einer Ebene zu bestimmen, sind zwei Werte erforderlich, die x-Koordinate und die y-Koordinate. Dies ist ein sehr wichtiges Grundkonzept, aber da jeder Mathematik studiert hat, werde ich nicht ins Detail gehen.
Der Ursprung der Leinwand ist die obere linke Ecke, genau wie beim Blitz. Aber das Ärgerliche ist, dass der Ursprung in der Mathematik in der unteren linken Ecke liegt. Das... Ich kann nur sagen, dass man sich einfach daran gewöhnt

Andere
Ein Merkmal der Leinwand, das sich von der echten Leinwand unterscheidet, ist, dass sie standardmäßig transparent ist und hat keine Hintergrundfarbe. Das ist meistens sehr wichtig.