في اللوحة القماشية، يمكنك استخدام وظيفة clip() لاقتصاص المنطقة. بعد تعيين منطقة الاقتصاص، يمكن عرض الصورة الموجودة داخل المنطقة فقط، وسيتم حظر الباقي.
ارسم دائرة بدون قص <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; الارتفاع:100%; var Canvas = document.getElementById('canvas'), context = Canvas.getContext('2d'); Canvas.width = document.body.clientWidth; .strokeStyle = 'red'; context.beginPath(); 180) * 0، (Math.PI / 180) * 360، false)؛ context.stroke();تأثير
استخدم clip() لاقتصاص منطقة ما <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; الارتفاع:100%; var Canvas = document.getElementById('canvas'), context = Canvas.getContext('2d'); document.body.clientWidth; .strokeStyle = 'red'; context.rect(0, 0, 200, 200); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false(); context.إغلاق المسار(); / الجسم> </html>تأثير
يمكنك أيضًا استخدام القوس لرسم منطقة قطع دائرية <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; الارتفاع:100%; var Canvas = document.getElementById('canvas'), context = Canvas.getContext('2d'); Canvas.width = document.body.clientWidth; .strokeStyle = 'red' context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360، false)؛ context.clip(); context.beginPath(); 180) * 360، خطأ)؛ context.stroke();تأثير
استخدم الحفظ والاستعادة لقطع مسار واحد فقط <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; الارتفاع:100%; var Canvas = document.getElementById('canvas'), context = Canvas.getContext('2d'); Canvas.width = document.body.clientWidth; .strokeStyle = 'red'; context.save(); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, context.stroke(); context.restore(); context.beginPath(); 180) * 0، (Math.PI / 180) * 360، false)؛ context.stroke();تأثير
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.