Dans Canvas, vous pouvez utiliser la fonction clip() pour recadrer la zone. Après avoir défini la zone de recadrage, seule l'image dans la zone peut être affichée et le reste sera bloqué.
Dessiner un cercle sans découpage <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; hauteur:100%; débordement:caché; couleur d'arrière-plan:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var toile = document.getElementById('canvas'), contexte = toile.getContext('2d'); toile.width = document.body.clientWidth; toile.height = document.body.clientHeight; .StrokeStyle = 'rouge'; contexte.beginPath(); contexte.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); contexte.accident vasculaire cérébral(); contexte.closePath();Effet
Utilisez clip() pour recadrer une zone <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; hauteur:100%; débordement:caché; couleur d'arrière-plan:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var toile = document.getElementById('canvas'), contexte = toile.getContext('2d'); toile.width = document.body.clientWidth; toile.height = document.body.clientHeight; .StrokeStyle = 'rouge'; contexte.rect(0, 0, 200, 200); contexte.clip(); contexte.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); contexte.closePath(); /corps> </html>Effet
Vous pouvez également utiliser l'arc pour dessiner une zone de découpage circulaire <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; hauteur:100%; débordement:caché; couleur d'arrière-plan:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var toile = document.getElementById('canvas'), contexte = toile.getContext('2d'); toile.width = document.body.clientWidth; toile.height = document.body.clientHeight; .StrokeStyle = 'rouge'; contexte.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, faux); contexte.clip(); contexte.beginPath(); contexte.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, faux); contexte.AVC(); contexte.closePath(); </script> </body> </html>Effet
Utilisez la sauvegarde et la restauration pour couper un seul chemin <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; hauteur:100%; débordement:caché; couleur d'arrière-plan:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var toile = document.getElementById('canvas'), contexte = toile.getContext('2d'); toile.width = document.body.clientWidth; toile.height = document.body.clientHeight; .StrokeStyle = 'rouge'; contexte.save(); contexte.rect(0, 0, 200, 200); contexte.beginPath(); contexte.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false contexte.AVC(); ; contexte.restore(); contexte.beginPath(); contexte.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); contexte.stroke(); contexte.closePath();Effet
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.