บนผืนผ้าใบ คุณสามารถใช้ฟังก์ชัน clip() เพื่อครอบตัดพื้นที่ได้ หลังจากตั้งค่าพื้นที่ครอบตัดแล้ว จะสามารถแสดงเฉพาะรูปภาพภายในพื้นที่นั้นได้ และส่วนที่เหลือจะถูกบล็อก
วาดวงกลมโดยไม่ต้องตัด <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; ความสูง:100%; ล้น:สีพื้นหลัง:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth; canvas.height = document.body.lineWidth; บริบท . strokeStyle = 'สีแดง'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, เท็จ); context.closePath(); </script> </body> </html>ผล
ใช้ clip() เพื่อครอบตัดพื้นที่ <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; ความสูง:100%; ล้น:สีพื้นหลัง:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth; canvas.height = document.body.lineWidth; บริบท . strokeStyle = 'red'; context.rect(0, 0, 200, 200); context.clip(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, เท็จ); /ตัว> </html>ผล
คุณยังสามารถใช้ส่วนโค้งเพื่อวาดพื้นที่การตัดเป็นวงกลมได้ <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; ความสูง:100%; ล้น:สีพื้นหลัง:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth; canvas.height = document.body.lineWidth; บริบท . strokeStyle = 'สีแดง'; context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, เท็จ); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.จังหวะ(); context.closePath(); </script> </body> </html>ผล
ใช้บันทึกและกู้คืนเพื่อตัดเส้นทางเดียวเท่านั้น <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; ความสูง:100%; ล้น:สีพื้นหลัง:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth; canvas.height = document.body.lineWidth; บริบท . strokeStyle = 'red'; context.save(); context.rect(0, 0, 200, 200); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, เท็จ); ; context.restore(); context.beginPath(); บริบท.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, เท็จ); context.closePath(); </script> </body> </html>ผล
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network