Contoh lukisan garisan asas HTML5 Kanvas tutorial_html5 kemahiran tutorial

Bagaimana untuk melukis garisan? Ia hampir sama seperti melukis dalam realiti:
1. Gerakkan berus ke permulaan lukisan
2. Tentukan titik perhentian sapuan pertama
3. Selepas merancang, pilih berus (termasuk Ketebalan dan warna, dsb.)
4

Oleh kerana Kanvas adalah berdasarkan lukisan keadaan (sangat penting, akan diterangkan kemudian), beberapa langkah pertama adalah untuk menentukan keadaan, dan langkah terakhir ialah lukisan khusus.

1. Gerakkan berus (moveTo())
Kami memperoleh konteks berus sebelum ini, jadi kami mengambil ini sebagai contoh untuk memberi contoh menggunakan kaedah yang diubah suai - context.moveTo(100,100). Maksud kod ini adalah untuk menggerakkan berus ke titik (100,100) (unit ialah px). Ingat, sudut kiri atas kanvas ialah asal sistem koordinat Cartesan, dan arah positif paksi-y adalah ke bawah dan arah positif paksi-x adalah ke kanan.
2. Titik henti lejang (lineTo())
Begitu juga, context.lineTo(600,600). Ayat ini bermaksud menarik dari titik perhentian pukulan sebelumnya kepada (600,600). Tetapi jelas, moveTo() dan lineTo() di sini hanyalah status, ia sedang merancang, saya sedang bersiap untuk melukis, saya belum mula melukis lagi, ia hanya rancangan!
3. Pilih berus
Di sini kami hanya menetapkan warna dan ketebalan berus.
context.lineWidth = 5, ayat ini bermaksud untuk menetapkan ketebalan berus (garisan) kepada 10px.
context.strokeStyle = "#AA394C", ayat ini bermaksud menetapkan warna berus (garisan) kepada merah mawar.
Oleh kerana Kanvas adalah lukisan berasaskan negeri, apabila kita memilih ketebalan dan warna berus, kita sebenarnya turut memilih ketebalan dan warna garisan.
4. Sahkan lukisan
Hanya terdapat dua kaedah untuk mengesahkan lukisan, fill() dan stroke(). Oleh kerana kita hanya melukis garisan, usap sahaja. Panggil sahaja konteks kod.stroke().

Lukis garisan
Bukankah ia hanya segmen garisan! sangat mengarut! Kemudian mari kita mula melukis.

Kod JavaScriptSalin kandungan ke papan keratan

2. "zh">
3. "UTF-8">
4. Mula dari baris
5. "canvas-warp">
6. "kanvas"
7. style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
8. > Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !

window.onload =

fungsi(){

var kanvas = document.getElementById(

"kanvas");

kanvas.lebar = 800; kanvas.tinggi = 600;

var konteks = canvas.getContext("2d"

); context.moveTo(100,100); context.lineTo(600,600); context.lineWidth = 5;

context.strokeStyle = "#AA394C"

; context.stroke();

}

Hasil jalankan:

(Rakan-rakan saya selalu bertanya kepada saya apakah beruang di sudut kanan bawah halaman? Oh, saya terlupa untuk menerangkan sebelum ini, itu adalah tera air anti-pemalsuan saya!)
Saya juga menanda rajah analisis halaman untuk rujukan anda.

Di sini saya mengalih keluar lebar dan tinggi daripada teg tetapi menetapkan atribut lebar dan ketinggian objek kanvas dalam kod JavaScript.

Ringkasan: Untuk menetapkan saiz kanvas, hanya terdapat dua kaedah

1. Tetapkan dalam tag

2. Tetapkan sifat kanvas dalam kod JS.

Bagaimana pula? Seterusnya kita perlu mempercepatkan dan melukis grafik yang terdiri daripada berbilang garisan. Adakah anda berasa seperti anda selangkah lebih dekat untuk menjadi seorang artis? Walaupun ini hanya segmen garisan yang mudah, lukisan ini hanya satu langkah kecil untuk kami, tetapi ia adalah lompatan gergasi untuk manusia!

Melukis garisan poli
Kami telah berjaya melukis segmen garisan di atas. Jadi, bagaimana jika saya ingin melukis garis poli dengan dua lejang atau banyak lejang? Rakan pintar mesti memikirkannya. Ini bukan mudah. Seterusnya, saya hanya melukis garis poli yang cantik~

Kod JavaScriptSalin kandungan ke papan keratan

2. "zh">
3. "UTF-8">
4. Lukis polyline
5. "canvas-warp">
6. "kanvas"
7. style="sempadan: 1px pepejal #aaaaa; paparan: blok; jidar: 50px auto ;"
8. > Penyemak imbas anda tidak menyokong Kanvas? ! Cepat tukar! !

window.onload =

fungsi(){

var kanvas = document.getElementById(

"kanvas");

kanvas.lebar = 800; kanvas.tinggi = 600;

var konteks = canvas.getContext("2d"

); context.moveTo(100,100); context.lineTo(300,300); context.lineTo(100,500);

context.lineWidth = 5; context.strokeStyle =

"#AA394C";

context.stroke(); }

Hasil jalankan:

Lukis berbilang polyline

Dengan cara yang sama, bagaimana jika kita mahu melukis berbilang polyline dengan gaya yang berbeza? Sebagai contoh, kami melukis tiga garis poli di sini, iaitu merah, biru dan hitam. Rakan-rakan pintar pasti berfikir bahawa ini tidak mudah Anda hanya perlu menyorot dan menukar warna berus. Format kod adalah sama, salin sahaja. Kodnya adalah seperti berikut.

Kod JavaScript

Salin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

  

        context.moveTo(100,100);   

        context.lineTo(300,300);   

        context.lineTo(100,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "merah";   

        context.stroke();   

  

        context.moveTo(300,100);   

        context.lineTo(500,300);   

        context.lineTo(300,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "biru";   

        context.stroke();   

  

        context.moveTo(500,100);   

        context.lineTo(700,300);   

        context.lineTo(500,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "hitam";   

        context.stroke();   

    }   

  

  

  

Hasil jalankan:

Hah? pelik tak? Bagaimana pula dengan merah dahulu, kemudian biru, kemudian hitam? Kenapa semua hitam? Sebenarnya, sebab di sini adalah sesuatu yang saya selalu tekankan sebelum ini - Kanvas ialah lukisan berasaskan negeri.
Apakah maksudnya? Malah, setiap kali kod ini menggunakan stroke(), ia akan menarik semula keadaan yang ditetapkan sebelum ini. Semasa lejang pertama(), garisan merah dilukis semasa lejang kedua(), garisan merah sebelumnya akan dilukis semula, tetapi pada masa ini berus telah digantikan dengan yang berwarna biru, jadi lukis Garisan poli yang dilukis semuanya berwarna biru . Dalam erti kata lain, harta strokeStyle ditindih. Dengan cara yang sama, apabila melukis untuk kali ketiga, warna pen ialah hitam terakhir, jadi tiga garis poli hitam akan dilukis semula. Oleh itu, tiga polyline yang dilihat di sini sebenarnya dilukis tiga kali, dan sejumlah 6 polylines dilukis.
Jadi, saya nak lukis tiga polyline, tak ada cara lain ke? Adakah ini pengakhiran jiwa artis? Adakah tiada harapan? Tidak, ada cara.
Gunakan beginPath() untuk memulakan lukisan
Untuk mengelakkan kaedah lukisan daripada lukisan berulang, kita boleh menambah beginPath() sebelum setiap lukisan, yang bermaksud titik permulaan lukisan seterusnya ialah kod selepas beginPath( ). Kami menambah context.beginPath() sebelum melukis tiga kali.

Kod JavaScriptSalin kandungan ke papan keratan

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.   
7.   
8. "canvas-warp">   
9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
11.        

  

  

  

    window.onload = fungsi(){   

        var kanvas = document.getElementById("kanvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

  

        context.beginPath();   

        context.moveTo(100,100);   

        context.lineTo(300,300);   

        context.lineTo(100,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "merah";   

        context.stroke();   

  

        context.beginPath();   

        context.moveTo(300,100);   

        context.lineTo(500,300);   

        context.lineTo(300,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "biru";   

        context.stroke();   

  

        context.beginPath();   

        context.moveTo(500,100);   

        context.lineTo(700,300);   

        context.lineTo(500,500);   

        context.lineWidth = 5;   

        context.strokeStyle = "hitam";   

        context.stroke();   

    }