En el lienzo, puede usar la función clip() para recortar el área. Después de configurar el área de recorte, solo se puede mostrar la imagen dentro del área y el resto se bloqueará.
Dibuja un círculo sin recortar. <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0 padding:0;} html, body{width:100; %; altura:100%; desbordamiento:oculto; color de fondo:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var lienzo = document.getElementById('lienzo'), contexto = lienzo.getContext('2d'); lienzo.width = document.body.clientWidth; lienzo.height = document.body.clientHeight; .strokeStyle = 'rojo'; contexto.beginPath(); contexto.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, falso); contexto.stroke(); contexto.closePath();Efecto
Utilice clip() para recortar un área <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0 padding:0;} html, body{width:100; %; altura: 100%; desbordamiento: oculto; color de fondo: #AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var lienzo = document.getElementById('lienzo'), contexto = lienzo.getContext('2d'); lienzo.width = document.body.clientWidth; lienzo.height = document.body.clientHeight; .strokeStyle = 'rojo'; contexto.rect(0, 0, 200, 200); contexto.clip(); contexto.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, contexto.stroke(); contexto.closePath(); /cuerpo> </html>Efecto
También puedes usar el arco para dibujar un área de recorte circular. <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0 padding:0;} html, body{width:100; %; altura: 100%; desbordamiento: oculto; color de fondo: #AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var lienzo = document.getElementById('lienzo'), contexto = lienzo.getContext('2d'); lienzo.width = document.body.clientWidth; lienzo.height = document.body.clientHeight; .strokeStyle = 'rojo'; contexto.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI / 180) * 360, falso); contexto.clip(); contexto.beginPath(); contexto.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, falso); contexto.stroke(); contexto.closePath();Efecto
Utilice guardar y restaurar para cortar solo un camino <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0 padding:0;} html, body{width:100; %; altura:100%; desbordamiento:oculto; color de fondo:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var lienzo = document.getElementById('lienzo'), contexto = lienzo.getContext('2d'); lienzo.width = document.body.clientWidth; lienzo.height = document.body.clientHeight; .strokeStyle = 'rojo'; contexto.save(); contexto.rect(0, 0, 200, 200); contexto.beginPath(); contexto.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, contexto.stroke(); ; contexto.restore(); contexto.beginPath(); contexto.arc(250, 250, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, falso); contexto.stroke(); contexto.closePath();Efecto
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.