Fungsi dari BeginPath sangat sederhana, yaitu untuk memulai jalur baru, namun sangat penting dalam proses penggunaan gambar kanvas.
Mari kita lihat sebagian kecil kodenya terlebih dahulu:
var ctx=document.getElementById(kanvas).getContext(2d); ctx.beginPath(); ctx.rect(150,150,100,100); ctx.fillStyle=hijau; .fillStyle=kuning; ctx.isi();
Kode kita tidak memiliki kesalahan, tetapi kita mendapatkan dua kotak kuning dengan panjang sisi 100px, bukan satu hijau dan satu kuning. Mengapa demikian?
Faktanya, metode menggambar (fill, stoke) di kanvas akan menggambar semua jalur setelah BeginPath terakhir. Pada kode di atas, persegi panjang pertama diisi dua kali, pertama berwarna hijau dan kedua berwarna kuning, jadi Dua persegi panjang kuning. diperoleh. Demikian pula untuk menggambar segmen garis, atau kurva lain, atau grafik, ke mana pun Anda bergerak, selama Anda tidak memiliki Jalur awal, Anda sedang menggambar jalur.
Jika grafik yang Anda gambar tidak sesuai dengan yang Anda bayangkan, ingatlah untuk memeriksa BeginPath.
Ketika berbicara tentang BeginPath, kita harus menyebutkan closePath. Faktanya, keduanya tidak ada hubungannya satu sama lain. closePath artinya menutup jalur, bukan mengakhiri jalur , bukan untuk memulai jalan baru.
Kami menambahkan closePath setelah pengisian pertama kode di atas, dan kami masih mendapatkan dua persegi panjang kuning.
Namun jika kita menambahkan BeginPath nanti, kita akan mendapatkan dua persegi panjang dengan warna berbeda.
Singkatnya, jangan mencoba memulai jalur baru dengan menutup sebagian jalur, dan jika Anda tidak menutup jalur tersebut, meskipun Anda memulai jalur baru, jalur tersebut tidak akan ditutup.
Tambahan: Memahami Beginpath dan Closepath kanvasmetode BeginPath()
var ctx = dokumen.getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx.beginPath ( ) ; ctx.moveTo ( 100.5 , 20.5 ) ; ;ctx.pindah Ke (100,5, 40,5); ctx.lineTo (200.5, 40.5) ctx.strokeStyle = '#f00' ;
Angka 0,5 adalah untuk menghindari garis buram. Lalu seperti apa grafik yang didapat dari kode di atas? Apakah itu garis hitam dan garis merah?
Dari segi kode, tidak ada masalah dengan logika kita, namun hasilnya kita mendapatkan dua garis merah, bukan satu hitam dan satu merah.
Jika Anda memahami mengapa hal ini terjadi, maka Anda tidak perlu membaca sisanya. Inilah pentingnya BeginPath.
Metode menggambar di kanvas (seperti guratan, isian) akan menggambar berdasarkan semua jalur setelah startPath terakhir. Misalnya, saya menggores dua kali pada kode di atas. Faktanya, kedua guratan ini didasarkan pada semua jalur setelah startPath pertama. Artinya, kita mengelus jalur pertama dua kali. Goresan pertama berwarna hitam, dan guratan kedua berwarna merah, jadi pada akhirnya juga berwarna merah.
1. Di mana pun Anda menggunakan moveTo untuk menggerakkan kuas, selama Anda tidak memulaiPath, Anda selalu menggambar jalur.
2. Fungsi seperti fillRect dan strokeRect, yang menggambar area independen secara langsung, tidak akan mengganggu jalur saat ini.
Jika grafik yang Anda gambar berbeda dari yang Anda bayangkan, ingatlah untuk memeriksa apakah ada BeginPath yang masuk akal.
-------
Berbicara tentang BeginPath, kita harus menyebutkan closePath. Apakah keduanya berkaitan erat? Jawabannya hampir tidak ada.
closePath tidak berarti mengakhiri jalur, tetapi menutup jalur. Ia akan mencoba menghubungkan jalur dari ujung jalur saat ini ke titik awal untuk menutup seluruh jalur. Namun, ini tidak berarti bahwa jalan setelahnya adalah jalan yang baru!
Kita menambahkan closePath setelah baris pertamaTo pada kode di atas, dan kita dapat menemukan bahwa kita masih mendapatkan dua garis merah.
Namun jika kita menambahkan BeginPath setelah goresan pertama, kita akan mendapatkan garis hitam dan garis merah seperti yang diharapkan.
ctx.stroke ( ) ; ctx.beginPath ( ) ; ctx.moveTo ( 100.5 , 40.5 ) ; ctx.lineTo ( 200.5 , 40.5 ) ctx.strokeStyle = '#f00' ;
Singkatnya, jangan mencoba memulai jalur baru dengan menutup jalur yang sudah ada. Saat Anda memulai jalur baru, jalur sebelumnya tidak akan ditutup.