Di kanvas, Anda dapat menggunakan fungsi clip() untuk memotong area. Setelah mengatur area pemotongan, hanya gambar di dalam area tersebut yang dapat ditampilkan, dan sisanya akan diblokir.
Gambarlah sebuah lingkaran tanpa kliping <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; tinggi:100%; luapan:tersembunyi; warna latar:#AFAFAF;} </gaya> </kepala> <tubuh> <kanvas id=kanvas></kanvas> <skrip> var kanvas = dokumen.getElementById('kanvas'), konteks = kanvas.getContext('2d'); kanvas.lebar = dokumen.body.clientWidth; .strokeStyle = 'merah'; konteks.beginPath(); konteks.arc(200, 200, 100, (Matematika.PI / 180) * 0, (Matematika.PI / 180) * 360, salah); konteks.stroke(); konteks.closePath();Memengaruhi
Gunakan clip() untuk memotong suatu area <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; tinggi:100%; luapan:tersembunyi; warna latar:#AFAFAF;} </gaya> </kepala> <tubuh> <kanvas id=kanvas></kanvas> <skrip> var kanvas = dokumen.getElementById('kanvas'), konteks = kanvas.getContext('2d'); kanvas.lebar = dokumen.body.clientWidth; .strokeStyle = 'merah'; konteks.langsung(0, 0, 200, 200); konteks.beginPath(); konteks.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); konteks.closePath(); /tubuh> </html>Memengaruhi
Anda juga dapat menggunakan busur untuk menggambar area kliping melingkar <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; tinggi:100%; luapan:tersembunyi; warna latar:#AFAFAF;} </gaya> </kepala> <tubuh> <kanvas id=kanvas></kanvas> <skrip> var kanvas = dokumen.getElementById('kanvas'), konteks = kanvas.getContext('2d'); kanvas.lebar = dokumen.body.clientWidth; .strokeStyle = 'merah'; konteks.arc(100, 100, 150, (Matematika.PI / 180) * 0, (Math.PI / 180) * 360, salah); konteks.clip(); konteks.beginPath(); konteks.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, salah); konteks.stroke(); konteks.closePath();Memengaruhi
Gunakan simpan dan pulihkan untuk hanya memotong satu jalur <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; tinggi:100%; luapan:tersembunyi; warna latar:#AFAFAF;} </gaya> </kepala> <tubuh> <kanvas id=kanvas></kanvas> <skrip> var kanvas = dokumen.getElementById('kanvas'), konteks = kanvas.getContext('2d'); kanvas.lebar = dokumen.body.clientWidth; .strokeStyle = 'merah'; konteks.simpan(); konteks.persegi(0, 0, 200, 200); konteks.beginPath(); konteks.arc(200, 200, 100, (Matematika.PI / 180) * 0, (Matematika.PI / 180) * 360, konteks.stroke(); konteks.closePath(); ; konteks.pemulihan(); konteks.beginPath(); konteks.arc(250, 250, 100, (Matematika.PI / 180) * 0, (Matematika.PI / 180) * 360, salah); konteks.stroke(); konteks.closePath();Memengaruhi
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.