วิธีการ clip() ใน Canvas ใช้เพื่อตัดรูปร่างและขนาดต่างๆ จากผืนผ้าใบต้นฉบับ เมื่อพื้นที่ถูกตัดแล้ว ภาพวาดที่ตามมาทั้งหมดจะถูกจำกัดไว้เฉพาะพื้นที่ที่ถูกตัด (ไม่สามารถเข้าถึงพื้นที่อื่นบนผืนผ้าใบได้)
คุณยังสามารถบันทึกพื้นที่แคนวาสปัจจุบันได้โดยใช้เมธอด save() ก่อนที่จะใช้เมธอด clip() และกู้คืนได้ตลอดเวลาในอนาคตผ่านเมธอด Restore()
จากนั้นใช้เมธอด clip() เพื่อให้ได้เอฟเฟกต์ไฟฉาย
</iframe><button id=btn>แปลง</button><button id=con>หยุดชั่วคราว</button><canvas id=canvas width=400 height=290 style=border:1px solid black>เบราว์เซอร์ปัจจุบันไม่ รองรับ Canvas โปรดเปลี่ยนเบราว์เซอร์แล้วลองอีกครั้ง</canvas><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; clearInterval(oTimer); }else{ this.innerHTML = 'หยุดชั่วคราว'; document.getElementById('canvas'); // ความกว้างและความสูงของผืนผ้าใบจัดเก็บข้อมูล var H=290,W=400; // ไฟฉายการจัดเก็บ var ball = {}; //เก็บรูปภาพ var IMG; //เก็บรูปภาพที่อยู่ var URL = 'http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/chunfen.jpg'; .getContext){ var cxt = canvas.getContext('2d'); var tempR = Math.floor(Math.random()*30+20); var tempX = Math.floor(Math.random()*(W-tempR) + tempR); var tempY = Math.floor(Math.random()*(H-tempR) + tempR) บอล = { 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 เรียนรู้และสื่อสารกันในแวดวง: 582735936 ]//For 1-3 front-endบุคลากร} //ช่วยฝ่าฟันปัญหาคอขวดทางเทคนิคและพัฒนาทักษะการคิด} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; bumpTest (บอล);} ฟังก์ชัน bumpTest (ele) {// ด้านซ้าย if (ele.x <= ele.r) { ele.x = ele.r ; ele.stepX = -ele.stepX; } // ด้านขวา if(ele.x >= W - ele.r){ ele.x = W - ele.stepX; // ด้านบน if(ele.y <= ele.r){ ele.y = ele.stepY = -ele.stepY; } // ด้านล่าง if(ele.y >= H - ele.r ){ ele.y = H - ele.r; ele.stepY = -ele.stepY; }} ฟังก์ชั่นเรนเดอร์ () {// รีเซ็ตความสูงของแคนวาสเพื่อให้ได้เอฟเฟกต์ของการเคลียร์แคนวาส ความสูง = H; if(canvas.getContext){ var cxt = canvas.getContext('2d'); cxt.save(); // ทำให้พื้นหลังของผ้าใบเป็นสีดำ cxt.beginPath(); 0,0,W,H); //แสดงไฟฉาย cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); cxt.fillStyle = '#000'; cxt.fill(); // เนื่องจาก ใช้โดยไม่มีคลิป() ภาพพื้นหลังแคนวาสจะปรากฏในพื้นที่คลิป() cxt.drawImage(IMG,0,0); }//ยินดีต้อนรับสู่วงแลกเปลี่ยนการพัฒนาแบบเต็มรูปแบบเพื่อเรียนรู้และสื่อสารร่วมกัน: 582735936 ]//สำหรับบุคลากรส่วนหน้า 1-3 คน} //ช่วยฝ่าฟันปัญหาคอขวดทางเทคนิคและปรับปรุงทักษะการคิด}} Initial();clearInterval (oTimer); function fnInterval( ){ //อัพเดตสถานะการเคลื่อนไหว(); //Render render(); } var oTimer = setInterval(fnInterval,50);ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network