Canvas では、clip() 関数を使用して領域を切り取ることができます。切り抜き領域を設定すると、その領域内の画像のみが表示され、残りはブロックされます。
クリッピングせずに円を描く<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; 高さ:100%; オーバーフロー:非表示; </style> </head> <body> <canvas id=canvas></canvas> <script> var Canvas = document.getElementById('canvas')、context = Canvas.getContext('2d'); Canvas.height = document.body.clientHeight = 3; .ストロークスタイル = 'red'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);効果
領域をトリミングするには、clip() を使用します。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; 高さ:100%; オーバーフロー:非表示; </style> </head> <body> <canvas id=canvas></canvas> <script> var Canvas = document.getElementById('canvas')、context = Canvas.getContext('2d'); Canvas.height = document.body.clientHeight = 3; .ストロークスタイル = 'red'; context.rect(0, 0, 200, 200); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.closePath(); /body> </html>効果
円弧を使用して円形のクリッピング領域を描画することもできます<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; 高さ:100%; オーバーフロー:非表示; </style> </head> <body> <canvas id=canvas></canvas> <script> var Canvas = document.getElementById('canvas')、context = Canvas.getContext('2d'); Canvas.height = document.body.clientHeight = 3; .ストロークスタイル = 'red'; context.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.clip(); context.beginPath(); context.arc(200, 200, 100) * 0, (Math.PI / 180) * 360、 false);効果
保存と復元を使用して 1 つのパスのみをカットする<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100; %; 高さ:100%; オーバーフロー:非表示; </style> </head> <body> <canvas id=canvas></canvas> <script> var Canvas = document.getElementById('canvas')、context = Canvas.getContext('2d'); Canvas.height = document.body.clientHeight = 3; .ストロークスタイル = 'red'; context.rect(0, 0, 200, 200); context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 360, false); ; context.restore(); context.beginPath(); context.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);効果
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。