In canvas, you can use the clip() function to crop the area. After setting the cropping area, only the image within the area can be displayed, and the rest will be blocked.
Draw a circle without clipping <!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.width = document.body.clientWidth; canvas.height = document.body.clientHeight; context.lineWidth = 3; context .strokeStyle = 'red'; context.beginPath(); context.arc(200, 200, 100, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false); context.stroke(); context.closePath(); </script> </body> </html>Effect
Use clip() to crop an area <!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.width = document.body.clientWidth; canvas.height = document.body.clientHeight; context.lineWidth = 3; context .strokeStyle = 'red'; 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(); </script> < /body> </html>Effect
You can also use arc to draw a circular clipping area <!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.width = document.body.clientWidth; canvas.height = document.body.clientHeight; context.lineWidth = 3; context .strokeStyle = 'red'; 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, false); context.stroke(); context.closePath(); </script> </body> </html>Effect
Use save and restore to only cut a single path <!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.width = document.body.clientWidth; canvas.height = document.body.clientHeight; context.lineWidth = 3; context .strokeStyle = 'red'; context.save(); 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() ; 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>Effect
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.