No canvas, você pode usar a função clip() para cortar a área. Após definir a área de corte, apenas a imagem dentro da área poderá ser exibida e o restante será bloqueado.
Desenhe um círculo sem recorte <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; altura:100%; overflow:hidden;background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth = document.body.clientHeight; .strokeStyle = 'vermelho'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, falso); context.stroke();Efeito
Use clip() para cortar uma área <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; altura:100%; overflow:hidden;background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth = document.body.clientHeight; .strokeStyle = 'vermelho' context.rect(0, 0, 200, 200); context.arc(200, 200, 100, (Math.PI/180) * 0, (Math.PI/180) * 360, false); context.closePath(); /corpo> </html>Efeito
Você também pode usar arco para desenhar uma área de recorte circular <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; altura:100%; overflow:hidden;background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth = document.body.clientHeight; .strokeStyle = 'vermelho'; contexto.arc(100, 100, 150, (Math.PI / 180) * 0, (Math.PI/180) * 360, falso); context.clip(); context.beginPath(); 180) * 360, falso); context.stroke(); context.closePath();Efeito
Use salvar e restaurar para cortar apenas um único caminho <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title></title> <style> *{margin:0;} html, body{width:100 %; altura:100%; overflow:hidden;background-color:#AFAFAF;} </style> </head> <body> <canvas id=canvas></canvas> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); canvas.width = document.body.clientWidth = document.body.clientHeight; .strokeStyle = 'vermelho'; context.save(); context.beginPath(); context.arc(200, 200, 100, (Math.PI/180) * 0, (Math.PI/180) * 360, false context.stroke(); ;context.restore();context.beginPath(); 180) * 0, (Math.PI / 180) * 360, falso); context.stroke();Efeito
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.