В холсте вы можете использовать функцию 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.clientHeight; context.lineWidth = 3; .strokeStyle = 'красный'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.stroke(); 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.clientHeight; context.lineWidth = 3; .strokeStyle = 'красный'; context.rect(0, 0, 200, 200); context.clip(); context.beginPath(); context.arc(200, 200, 100, (Math.PI/180) * 0, (Math.PI / 180) * 360, false); context.stroke(); context.closePath(); /тело> </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.clientHeight; context.lineWidth = 3; .strokeStyle = 'красный'; context.arc(100, 100, 150, (Math.PI/180) * 0, (Math.PI/180) * 360, false); context.clip(); context.beginPath(); context.arc(200, 200, 100, (Math.PI/180) * 0, (Math.PI / 180) * 360, ложь); context.stroke(); 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.clientHeight; context.lineWidth = 3; .strokeStyle = 'красный'; context.save(); context.rect(0, 0, 200, 200); context.beginPath(); context.arc(200, 200, 100, (Math.PI/180) * 0, (Math.PI/180) * 360, context.stroke(); ; context.restore(); context.beginPath(); context.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.stroke(); context.closePath(); </script> </body> </html>Эффект
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.