在canvas中，可以使用clip()函數來裁切區域，設定裁切區域後，只有在區域內的影像才能顯示，其餘部分會被屏蔽掉
未使用裁切繪製一個圓<!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>效果
使用clip()裁切區域<!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>效果
也可以使用arc繪製圓形的剪裁區域<!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>效果
使用save和restore實作只裁切單一路徑<!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>效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。