El método clip() en el lienzo se utiliza para cortar formas y tamaños arbitrarios del lienzo original. Una vez recortada un área, todos los dibujos posteriores se limitarán al área recortada (no se podrá acceder a otras áreas del lienzo)
También puede guardar el área del lienzo actual utilizando el método save() antes de utilizar el método clip() y restaurarla en cualquier momento en el futuro mediante el método restaurar().
A continuación, utilice el método clip() para lograr un efecto de reflector.
</iframe><button id=btn>Transformar</button><button id=con>Pausa</button><canvas id=canvas width=400 height=290 style=border:1px solid black>El navegador actual no admita el lienzo, cambie el navegador y vuelva a intentarlo</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pausa'){ this.innerHTML = 'resume'; clearInterval(oTimer); }else{ this.innerHTML = 'pausa'; setInterval(fnInterval,50); document.getElementById('canvas'); //Ancho y alto del lienzo de almacenamiento var H=290,W=400 //Reflector de almacenamiento var ball = {}; // Fotos de almacenamiento var IMG; // Dirección de fotos de almacenamiento var = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = lienzo.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); = Math.floor(Math.random()*(W-tempR) + tempR) = Math.floor(Math.random()*(H-tempR) + tempR) bola = { x:tempX, y: tempY, r:tempR, pasoX:Math.floor(Math.random() * 21 -10), pasoY:Math.floor(Math.random() * 21 -10) }; IMG = document.createElement('img'); IMG.src=URL; IMG.onload = function(){ cxt.drawImage(IMG,0,0); intercambio de desarrollo de pila Aprenda y comuníquese juntos en el círculo: 582735936 ]// Para 1-3 personal de front-end} // Ayude a superar los cuellos de botella técnicos y mejorar las habilidades de pensamiento} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; knockTest(ball);} function knockTest(ele){ //lado izquierdo if(ele.x <= ele.r){ ele.x = ele.r ; ele.stepX = -ele.stepX; } //Lado derecho if(ele.x >= W - ele.r){ ele.x = W - ele.r; ele.stepX = -ele.stepX } //Lado superior if(ele.y <= ele.r){ ele.y = ele.r; ele.stepY = -ele.stepY } //Lado inferior if(ele.y >= H - ele.r; ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} function render(){ //Restablece la altura del lienzo para lograr el efecto de limpiar el lienzo canvas.height = H; if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); //Ennegrecer el fondo del lienzo cxt.beginPath(); 0,0,W,H); //Renderizar reflector cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.fill(); utilizar Sin clip(), la imagen de fondo del lienzo aparecerá en el área de clip() cxt.drawImage(IMG,0,0); }//Bienvenido a unirse al círculo de intercambio de desarrollo completo para aprender y comunicarse juntos: 582735936 ]//Para 1-3 personal de front-end} //Ayude a superar los cuellos de botella técnicos y mejorar las habilidades de pensamiento}} inicial();clearInterval (oTimer); función fnInterval( ){ //Actualizar actualización de estado de movimiento(); //Renderizar() } var oTimer = setInterval(fnInterval,50);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.