캔버스의 클립() 메서드는 원본 캔버스에서 임의의 모양과 크기를 자르는 데 사용됩니다. 한 영역이 잘리면 이후의 모든 그리기는 잘린 영역으로 제한됩니다(캔버스의 다른 영역에는 액세스할 수 없음).
또한, Clip() 메소드를 사용하기 전에 save() 메소드를 사용하여 현재 캔버스 영역을 저장하고, 나중에 언제든지 Restore() 메소드를 통해 복원할 수도 있습니다.
다음으로, 서치라이트 효과를 얻기 위해 클립() 메서드를 사용합니다.
</iframe><button id=btn>변환</button><button id=con>일시중지</button><canvas id=canvas width=400 height=290 style=border:1px solid black>현재 브라우저는 그렇지 않습니다 캔버스를 지원하려면 브라우저를 변경하고 다시 시도하십시오.</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume';clearInterval(oTimer); }else{ this.innerHTML = 'pause'; oTimer = setInterval(fnInterval,50); document.getElementById('canvas'); //저장소 캔버스 너비 및 높이 var H=290,W=400; //저장소 탐조등 var ball = {}; //저장소 사진 var IMG; //저장소 사진 주소 var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg' functioninitial(){ if(canvas .getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR) ball = { x:tempX, y: tempY, r:tempR, stepX:Math.floor(Math.random() * 21 -10), stepY:Math.floor(Math.random() * 21 -10) }; IMG = document.createElement('img'); IMG.src=URL; IMG.onload = function(){ cxt.drawImage(IMG,0,0) }//전체 참여를 환영합니다. stack development exchange 서클에서 함께 배우고 소통합니다: 582735936 ]//프론트엔드 직원 1~3명용} //기술적 병목 현상을 극복하고 사고 능력을 향상시키는 데 도움이 됩니다.} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; 범프 테스트(ball);} function 범프 테스트(ele){ //왼쪽 if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //오른쪽 if(ele.x >= W - ele.r){ ele.x = W - ele.rX } //상단 if(ele.y <= ele.r){ ele.y = ele.r; ele.stepY = -ele.stepY } //하단 if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //캔버스를 지우는 효과를 얻기 위해 캔버스 높이를 재설정합니다. if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); //캔버스 배경을 검게 합니다. cxt.beginPath() = '#000'; 0,0,W,H); //서치라이트 렌더링 cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.clip(); Clip()을 사용하지 않으면 캔버스 배경 이미지가 클립() 영역에 나타납니다. cxt.drawImage(IMG,0,0); }//함께 배우고 소통할 수 있는 풀스택 개발 교류 서클에 오신 것을 환영합니다: 582735936 ]//1-3명의 프런트엔드 직원용} //기술적 병목 현상을 극복하고 사고 능력을 향상시키는 데 도움이 됩니다.}}initial();clearInterval (oTimer); function fnInterval( ){ //모션 상태 업데이트 update(); //렌더링() } var oTimer = setInterval(fnInterval,50);위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.