Im Canvas können Sie die Funktion „clip()“ verwenden, um den Bereich zuzuschneiden. Nach dem Festlegen des Zuschneidebereichs kann nur das Bild innerhalb des Bereichs angezeigt werden, der Rest wird blockiert.
Zeichnen Sie einen Kreis ohne Beschneidung <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; height:100%; overflow:hidden; background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.height = document.body.clientHeight = 3; .strokeStyle = 'red'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.closePath();Wirkung
Verwenden Sie clip(), um einen Bereich zuzuschneiden <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; height:100%; overflow:hidden; background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.height = document.body.clientHeight = 3; .strokeStyle = 'red'; context.rect(0, 0, 200, 200); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.closePath(); /body> </html>Wirkung
Sie können den Bogen auch verwenden, um einen kreisförmigen Beschneidungsbereich zu zeichnen <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; height:100%; overflow:hidden; background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.height = document.body.clientHeight = 3; .strokeStyle = 'red'; context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.close(); context.closePath();Wirkung
Verwenden Sie Speichern und Wiederherstellen, um nur einen einzelnen Pfad auszuschneiden <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0; padding:0;} html, body{width:100 %; height:100%; overflow:hidden; background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.height = document.body.clientHeight = 3; .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, false); ; context.restore(); context.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.closePath();Wirkung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.