نموذج التعليمات البرمجية لتأثير كشاف قماش

يتم استخدام طريقة clip() في اللوحة القماشية لقص الأشكال والأحجام التعسفية من اللوحة القماشية الأصلية. بمجرد قص المنطقة، ستقتصر جميع الرسومات اللاحقة على المنطقة المقطوعة (لا يمكن الوصول إلى المناطق الأخرى على اللوحة القماشية)

يمكنك أيضًا حفظ منطقة اللوحة القماشية الحالية باستخدام طريقة 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><script> btn.onclick = function(){history.go();}con.onclick = function(){ if(this.innerHTML == 'pause'){ this.innerHTML = 'resume'; ClearInterval(oTimer); }else{ this.innerHTML = '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'; .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.onload = function(){ cxt.drawImage(IMG,0,0); تبادل تطوير المكدس تعلم وتواصل معًا في الدائرة: 582735936 ]// لـ 1-3 من موظفي الواجهة الأمامية} // ساعد في تجاوز الاختناقات الفنية وتحسين مهارات التفكير} } } function update(){ ball.x += ball.stepX; ball.y += ball.stepY; ele.stepX = -ele.stepX; } // الجانب الأيمن if(ele.x >= W - ele.r){ ele.x = W - ele.stepX = -ele.stepX } // الجانب العلوي 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(){ // إعادة ضبط ارتفاع اللوحة القماشية لتحقيق تأثير مسح اللوحة القماشية Canvas.height = H; if(canvas.getContext){ var cxt = Canvas.getContext('2d'); // تشويه خلفية القماش cxt.beginPath(); 0,0,W,H); //عرض الكشاف cxt.beginPath(); cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI); استخدم بدون مقطع ()، ستظهر صورة خلفية اللوحة القماشية في منطقة المقطع () cxt.drawImage(IMG,0,0); }// مرحبًا بكم في الانضمام إلى دائرة تبادل التطوير الكاملة للتعلم والتواصل معًا: 582735936 ]// لـ 1-3 موظفين في الواجهة الأمامية} // ساعد في تجاوز الاختناقات الفنية وتحسين مهارات التفكير}} الأولي();clearInterval (oTimer); function fnInterval(){ // تحديث حالة الحركة update(); //Render render() } var oTimer = setInterval(fnInterval,50);

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.