Baru-baru ini, saya telah mempelajari beberapa atribut elemen baru HTML5 dan menemukan bahwa atribut tersebut sangat mudah digunakan, terutama elemen tag baru Canvas. Pengenalan resmi: Canvas API (canvas) adalah tag baru dalam HTML5 yang digunakan untuk menghasilkan gambar secara real time di halaman web dan dapat memanipulasi konten gambar. Berikut ini penggunaan JavaScript yang dikombinasikan dengan Canvas untuk mengimplementasikan fungsi papan gambar
Gambar demonstrasi efek:
Bagian kode (salin langsung dan gunakan)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas mengimplementasikan papan gambar khusus</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=teks/javascript> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //Gambar persegi panjang hitam ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //Tekan tanda var onoff = false; //Variabel oldx dan oldy mewakili koordinat sebelum mouse bergerak var oldx = -10 ; var oldy = -10; //Atur warna var linecolor = putih; //Atur lebar garis var linw = 4; //Tambahkan event pergerakan mouse canvas.addEventListener(mousemove,draw,true); //Parameter ketiga terutama terkait dengan menangkap atau menggelembungkan //Tambahkan event pers mouse canvas.addEventListener(mousedown,down,false); naik acara canvas.addEventListener(mouseup,up,false); fungsi turun(acara){ onoff = true; oldx = event.pageX-10; acara.halamanY-10; //konsol.log(acara.halamanX+'............000............'+acara.halamanY) ; /event.pageX dan event.pageY relatif terhadap posisi mouse seluruh halaman termasuk bagian luapan (yaitu, bilah gulir) } function up(){ onoff = false } function draw(event){ if(onoff == benar) { var newx = event.pageX-10; event.pageY-10; ctx.beginPath();//beginPath() Membuang jalur mana pun yang saat ini ditentukan dan memulai jalur baru. Ini menetapkan titik saat ini ke (0,0). ctx.moveTo(oldx,oldy); //Pindah ke koordinat ketika diklik, dengan koordinat tersebut sebagai asal ctx.lineWidth=linw; ; ctx.lineCap=round; ctx.stroke();//Metode stroke() sebenarnya akan menggambar jalur yang ditentukan oleh metode moveTo() dan lineTo(). Warna defaultnya adalah hitam. //Menetapkan posisi mouse baru ke koordinat awal gambar berikutnya start oldx = newx; oldy = newy };</script></body></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.