Sejak saya mulai bekerja, saya telah menulis tentang vue, react, aturan reguler, algoritma, program kecil, dll, tetapi saya belum pernah menulis tentang kanvas, karena saya benar-benar tidak tahu caranya!
Pada tahun 2018, saya menetapkan tujuan kecil untuk diri saya sendiri: mempelajari kanvas, dan mencapai hasil karena dapat menggunakan kanvas untuk mewujudkan beberapa animasi yang tidak mudah dicapai dengan CSS3.
Artikel ini merupakan keuntungan pertama dari mempelajari kanvas. Demo pertama yang dilakukan banyak orang saat mempelajari kanvas adalah mengimplementasikan sebuah jam, namun daripada membicarakan hal ini, saya akan membahas tentang yang lebih menarik dan sederhana satu. hal.
Tahan mouse untuk menggambar lintasan membutuhkanDi kanvas, tidak ada apa pun di kanvas dalam keadaan awal. Sekarang, saya ingin menambahkan beberapa peristiwa mouse ke kanvas dan menggunakan mouse untuk menulis di kanvas. Efek spesifiknya adalah menggerakkan mouse ke titik mana pun di kanvas, lalu tahan mouse, gerakkan posisi mouse, dan Anda dapat mulai menulis!
prinsipMari kita analisa idenya secara singkat. Pertama, kita membutuhkan kanvas, lalu hitung posisi mouse di kanvas, ikat event onmousedown dan event onmousemove ke mouse, dan gambar jalur selama pergerakan gambar berakhir.
Meskipun ide ini sangat sederhana, ada beberapa bagian yang memerlukan beberapa trik untuk diterapkan.
1. Diperlukan file html yang berisi elemen kanvas.
Ini adalah kanvas dengan lebar 800 dan tinggi 400. Mengapa Anda tidak menulis px? Oh ya, saya belum paham, itu direkomendasikan oleh dokumen kanvas.
<!doctype html><html class=no-js lang=zh> <head> <meta charset=utf-8> <meta http-equiv=x-ua-kompatibel content=ie=edge> <title>pembelajaran kanvas< /judul> <nama meta=deskripsi konten=> <nama meta=konten viewport=lebar=lebar perangkat, skala awal=1> <link rel=manifest href=site.webmanifest> <link rel=apple-touch-icon href=icon.png> <link rel=stylesheet href=css/main.css> </head> <body> <canvas id=theCanvas width=800 height =400></kanvas> <skrip src=js/main.js></script> </body></html>
2. Tentukan apakah lingkungan saat ini mendukung kanvas.
Di main.js, kami menulis fungsi yang dijalankan sendiri. Berikut ini adalah cuplikan kode untuk penilaian kompatibilitas. Bagian utama kode akan menjadi inti dari persyaratan implementasi.
(function() { let theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { //Tidak kompatibel dengan kanvas return false } else { //Isi kode}})()3. Ambil objek 2d.
biarkan konteks = theCanvas.getContext('2d')4. Dapatkan koordinat mouse saat ini relatif terhadap kanvas.
Mengapa kita perlu mendapatkan koordinat ini? Karena mouse secara default mendapatkan koordinat relatif dari jendela saat ini, dan kanvas dapat ditempatkan di mana saja pada halaman, perhitungan diperlukan untuk mendapatkan koordinat mouse sebenarnya.
Mendapatkan koordinat sebenarnya dari mouse relatif terhadap kanvas diringkas menjadi sebuah fungsi. Jika Anda merasa abstrak, Anda dapat menggambar di kertas coretan untuk memahami mengapa operasi ini diperlukan.
Biasanya, ini adalah x - rect.left dan y - rect.top. Tapi kenapa sebenarnya x - rect.left * (canvas.width/rect.width)?
canvas.width/rect.width berarti menentukan perilaku penskalaan di kanvas dan menemukan kelipatan penskalaan.
const windowToCanvas = (canvas, x, y) => { //Dapatkan beberapa atribut jendela jarak elemen kanvas, dijelaskan di MDN let rect = canvas.getBoundingClientRect() //Parameter x dan y diteruskan masing-masing dari mouse jarak koordinat jendela, lalu kurangi jarak antara kanvas dan kiri dan atas jendela. return { x: x - persegi.kiri * (lebar kanvas/lebar persegi), y: y - persegi.atas * (tinggi kanvas/tinggi persegi) }}5. Dengan fungsi alat pada langkah 4, kita dapat menambahkan event mouse ke kanvas!
Pertama ikat event onmousedown ke mouse dan gunakan moveTo untuk menggambar titik awal koordinat.
theCanvas.onmousedown = function(e) {//Dapatkan koordinat titik di mana mouse ditekan relatif terhadap kanvas. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Menghancurkan penugasan es6 let { x, y } = ele //Titik awal menggambar. konteks.moveTo(x, y)}6. Saat menggerakkan mouse, tidak ada kejadian tekan lama mouse, bagaimana cara memantaunya?
Trik kecil yang digunakan di sini adalah dengan mengeksekusi event onmousemove (gerakan mouse) di dalam onmousedown, sehingga mouse dapat dimonitor dan digerakkan.
theCanvas.onmousedown = function(e) {//Dapatkan koordinat titik di mana mouse ditekan relatif terhadap kanvas. let ele = windowToCanvas(theCanvas, e.clientX, e.clientY) //Menghancurkan penugasan es6 let { x, y } = ele //Titik awal menggambar. konteks.moveTo(x, y) //Peristiwa perpindahan mouse theCanvas.onmousemove = (e) => { //Dapatkan posisi koordinat baru saat bergerak, gunakan lineTo untuk mencatat koordinat saat ini, lalu coret untuk menggambar titik sebelumnya ke titik saat ini Jalur biarkan ele = windowToCanvas(theCanvas, e.clientX, e.clientY) biarkan { x, y } = ele konteks.lineTo(x, y) konteks.stroke() }}7. Saat mouse dilepaskan, jalur tidak lagi tergambar.
Apakah ada cara untuk mencegah dua kejadian yang dipantau di atas pada kejadian onmouseup? Ada banyak metode. Menyetel onmousedown dan onmousemove ke null adalah salah satunya. isAllowDrawLine disetel ke nilai bool untuk mengontrol apakah fungsi dijalankan. Untuk kode spesifiknya, silakan lihat kode sumber lengkap di bawah.
Kode sumberIni dibagi menjadi 3 file, index.html, main.js, dan utils.js. Sintaks es6 digunakan di sini. Saya menggunakan parcle untuk mengkonfigurasi lingkungan pengembangan, jadi tidak akan ada kesalahan jika Anda menyalin kode secara langsung , saat dijalankan Jika terjadi kesalahan dan browser tidak dapat diupgrade, Anda dapat mengubah sintaks es6 menjadi es5.
1.indeks.html
Itu sudah ditunjukkan di atas dan tidak akan terulang lagi.
2.main.js
impor { windowToCanvas } dari './utils'(function() { biarkan theCanvas = document.querySelector('#theCanvas') if (!theCanvas || !theCanvas.getContext) { return false } else { biarkan konteks = theCanvas.getContext ('2d') biarkan isAllowDrawLine = false theCanvas.onmousedown = function(e) { isAllowDrawLine = true biarkan ele = windowToCanvas(theCanvas, e.clientX, e.clientY) let { x, y } = ele konteks.moveTo(x, y) theCanvas.onmousemove = (e) => { if (isAllowDrawLine) { let ele = windowToCanvas(theCanvas , e.clientX, e.clientY) misalkan { x, y } = ele konteks.lineTo(x, y) konteks.stroke() } } } theCanvas.onmouseup = function() { isAllowDrawLine = false } }})()3.utils.js
/** Dapatkan koordinat mouse di kanvas* */const windowToCanvas = (kanvas, x, y) => { let rect = canvas.getBoundingClientRect() return { x: x - rect.left * (canvas.width /rect .width), y: y - rect.top * (canvas.height/rect.height) }}ekspor { windowToCanvas} MeringkaskanAda kesalahpahaman di sini, saya menggunakan objek kanvas untuk mengikat acara theCanvas.onmouseup. Faktanya, kanvas tidak dapat mengikat acara. Namun karena browser akan secara otomatis menilainya untuk Anda dan menyerahkan pemrosesan acara, tidak perlu khawatir sama sekali.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.