Tutorial menggunakan HTML5 untuk mencapai kemahiran tutorial kesan calitan pemadam_html5

Kesan ini baru sahaja digunakan dalam projek baru-baru ini, yang agak seperti kad calar Pada peranti mudah alih, gambar dicalar untuk memaparkan gambar lain. Paparannya adalah seperti berikut:

DEMO sila klik di sebelah kanan: DEMO
Ini adalah perkara biasa di Internet Saya pada asalnya ingin mencari demo dalam talian dan menggunakan kaedahnya, saya dapati dalam android Kerana keperluan pelanggan, ia tidak diperlukan untuk menjadi sangat lancar pada Android, sekurang-kurangnya ia mesti boleh dimainkan, tetapi demo yang saya temui dalam talian terlalu lambat dan tidak boleh dimainkan sama sekali. Jadi saya hanya mahu menulis sendiri, dan artikel ini hanya untuk merekodkan proses penyelidikan.

Perkara pertama yang terlintas di fikiran untuk kesan mengikis ini ialah menggunakan kanvas HTML5 Dalam API kanvas, kaedah clearRect yang boleh mengosongkan piksel ialah kaedah clearRect, tetapi kaedah clearRect mengosongkan segi empat tepat kawasan. kebanyakan orang sudah terbiasa dengannya. Pemadam semuanya bulat, jadi fungsi berkuasa kawasan keratan diperkenalkan, iaitu kaedah klip. Penggunaannya sangat mudah:

Kod XML/HTMLSalin kandungan ke papan keratan

1. ctx.save()
2. ctx.beginPath()
3. ctx.arc(x2,y2,a,0,2*Math.PI);
ctx.clip()
ctx.clearRect(0,0,canvas.width,canvas.height);
5. ctx.restore();

6. Kod di atas merealisasikan pemadaman kawasan bulat, iaitu, mula-mula melaksanakan laluan bulat, dan kemudian menggunakan laluan ini sebagai kawasan keratan, dan kemudian mengosongkan piksel. Satu perkara yang perlu diambil perhatian ialah anda perlu menyimpan persekitaran lukisan dahulu, dan menetapkan semula persekitaran lukisan selepas mengosongkan piksel Jika anda tidak menetapkan semula, lukisan masa hadapan akan dihadkan kepada kawasan keratan itu.

   Sekarang kesan pemadaman sudah ada, kini tiba masanya untuk menulis kesan pemadaman pergerakan tetikus saya akan menggunakan tetikus untuk menerangkannya di bawah, kerana versi mudah alih adalah serupa, iaitu, gantikan tetikus dengan permulaan sentuh, gerakan tetikus. dengan touchmove, dan mouseup dengan touchend , dan pemerolehan titik koordinat ditukar daripada e.clientX kepada e.targetTouches[0].pageX.

   Untuk melaksanakan pemadaman pergerakan tetikus, saya mula-mula terfikir untuk memadamkan kawasan bulatan di mana tetikus terletak dalam acara gerakan tetikus yang dicetuskan apabila tetikus bergerak Selepas menulisnya, saya mendapati bahawa apabila tetikus bergerak dengan sangat pantas, The kawasan tidak lagi koheren, dan kesan berikut akan kelihatan Ini jelas bukan kesan pemadam yang kita mahukan.
   

   Memandangkan semua titik tidak koheren, perkara seterusnya yang perlu dilakukan ialah menyambungkan titik ini Jika anda melaksanakan fungsi lukisan, anda boleh menyambung terus dua titik melalui lineTo dan kemudian lukis, tetapi kesan pemadaman ialah Kawasan keratan. memerlukan laluan tertutup Jika anda hanya menyambungkan dua titik, kawasan keratan tidak boleh dibentuk. Kemudian saya terfikir untuk menggunakan kaedah pengiraan untuk mengira empat koordinat titik akhir bagi segi empat tepat dalam dua kawasan pemadaman, iaitu segi empat tepat merah dalam gambar di bawah:
   

   Kaedah pengiraan juga sangat mudah, kerana kita boleh mengetahui koordinat dua titik akhir garis yang menghubungkan dua kawasan keratan, dan juga mengetahui sejauh mana garis yang kita inginkan, koordinat empat titik akhir segi empat tepat menjadi mudah dicari, jadi terdapat Kod di bawah:
   Kod XML/HTMLSalin kandungan ke papan keratan

   1. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2- x1)));
   2. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)) )
   3. var x3 = x1 asin;
   var
   4. y3 = y1-acos
   var
   5. x4 = x1-asin
   var
   6. y4 = y1 acos; var
   x5
   7. = x2 asin; var y5
   =
   8. y2-acos; var x6 =
   x2
   9. -asin var y6 =
   y2
   10. acos;

       　x1, y1 dan x2, y2 ialah dua titik akhir, dengan itu koordinat empat titik akhir diperoleh. Dengan cara ini, kawasan keratan ialah bulatan ditambah segi empat tepat dan kod itu disusun seperti berikut:
       Kod XML/HTMLSalin kandungan ke papan keratan

       1. var gegas = "ontouchstart" dalam tetingkap?true:false,//tentukan sama ada Untuk peranti mudah alih
       2.  tekan mula = segera?"touchstart":"mousedown", 
       3.  tapmove = cepat?"touchmove":"mousemove", 
       4.  tapend = segera?"touchend":"mouseup";
       canvas.addEventListener(tapstart , function(e){
       e.preventDefault();
        
        
       9. x1 = gegas?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
        
       10. y1 = cepat?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
        
       // Padamkan kawasan bulat apabila tetikus diklik buat kali pertama dan rekod titik koordinat pertama pada masa yang sama
       ctx.save()
       ctx.beginPath()
       ctx.arc(x1,y1,a,0,2*Math.PI);
       15. ctx.clip()
       16. ctx.clearRect(0,0,canvas.width,canvas.height);
       ctx.restore();
        
       canvas.addEventListener(tapmove, tapmoveHandler);
       19. canvas.addEventListener(tapend, function(){
       20. canvas.removeEventListener(tapmove, tapmoveHandler
       21. });
       22. //Acara ini dicetuskan apabila tetikus bergerak
       23. fungsi tapmoveHandler(e){
       24. e.preventDefault()
       25.  x2 = gegas?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
       26.  y2 = gegas?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
       27.  
       28. //Dapatkan empat titik akhir kawasan keratan antara dua titik
       29. var aasin = a*Math.sin(Math.atan((y2-y1)/(x2-x1)) );
       30. var aacos = a*Math.cos(Math.atan((y2-y1)/(x2-x1)) )
       31. var x3 = x1 asin;
       var
       32. y3 = y1-acos
       var
       33. x4 = x1-asin
       var
       34. y4 = y1 acos; var
       x5
       35. = x2 asin; var y5
       =
       36. y2-acos var x6
       =
       37. x2-asin var y6
       =
       38. y2 acos;   // Pastikan kesinambungan garisan, jadi lukis bulatan pada satu hujung segi empat tepat
       39. ctx.save()
       40. ctx.beginPath()
       41. ctx.arc(x2,y2,a,0,2*Math.PI);
       ctx.clip()
       ctx.clearRect(0,0,canvas.width,canvas.height);
       43. ctx.restore();
       44.  
       45. // Kosongkan piksel dalam kawasan keratan segi empat tepat
       46. ctx.save()
       47. ctx.beginPath()
       48. ctx.moveTo(x3,y3);
       ctx.lineTo(x5,y5);
       49. ctx.lineTo(x6,y6);
       50. ctx.lineTo(x4,y4);
       ctx.closePath();
       ctx.clip()
       ctx.clearRect(0,0,canvas.width,canvas.height);
       53. ctx.restore();
       54.  
       55. //Rekod koordinat terakhir
       x1
       57. = x2; y1
       =
       58. y2 }
       })
       60. Dengan cara ini, kesan pemadaman tetikus dicapai, tetapi terdapat satu lagi perkara yang perlu dicapai, iaitu kesan kebanyakan pemadaman Apabila anda memadamkan bilangan piksel tertentu, semua kandungan imej akan dipaparkan secara automatik, ini kesan, saya menggunakan imgData untuk mencapai. Kodnya adalah seperti berikut: Salin kod
       Kod XML/HTML

       
       Salin kandungan ke papan keratan

       var

       imgData

       1. = ctx.getImageData(0,0,canvas.width,canvas. ketinggian); var dd
       =
       2. 0; untuk(var x=
       0
       3. ;ximgData.width;x =1){ untuk(var y=
       0
       4. ;yimgData.height;y =1){ var i = (y*imgData.width x)*4
       5. if(imgData.data[i 3] > 0){
       6. dd dd                                                               
       }
       }
       jika(dd/(imgData.width*imgData.height)
       0.4
       10. ){
       11. canvas.className = "noOp"
       12. }

           Dapatkan imgData, melintasi piksel dalam imgData, dan kemudian menganalisis alfa dalam rgba dalam tatasusunan data imgData, iaitu, menganalisis ketelusan Jika piksel dipadamkan, ketelusan akan menjadi 0, iaitu Ia adalah untuk bandingkan bilangan piksel dengan ketelusan bukan sifar dalam kanvas semasa dengan jumlah bilangan piksel pada kanvas Jika perkadaran piksel dengan ketelusan bukan sifar adalah kurang daripada 40%, ini bermakna terdapat lebih daripada 60%. daripada kawasan pada kanvas semasa Setelah dipadamkan, gambar boleh dipaparkan secara automatik.

           Perhatikan di sini bahawa saya meletakkan kod untuk menyemak piksel dalam acara naik tetikus, kerana jumlah pengiraan agak besar Jika pengguna mengklik tetikus secara liar, acara naik tetikus akan dicetuskan secara liar, yang bermaksud dia akan menjadi gila. Mencetuskan gelung itu untuk mengira piksel, jumlah pengiraan adalah sangat besar sehingga ia menyekat proses dan menyebabkan antara muka tersekat Penyelesaiannya adalah seperti berikut: tambah tamat masa untuk menangguhkan pelaksanaan pengiraan piksel dan kosongkan tamat masa setiap. masa pengguna mengklik, iaitu, jika pengguna mengklik untuk masa yang lama, pengiraan ini tidak akan dicetuskan lagi bilangan piksel terlalu besar, ia pasti akan tersekat, jadi anda boleh menggunakan pemeriksaan rawak, seperti Semak setiap 30 piksel Kod yang diubah suai adalah seperti berikut:
           Salin kod

           Kod XML/HTMLSalin kandungan ke papan keratan

           1. masa tamat = setTimeout(fungsi(){
           2. var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
           3. var dd = 0;
           untuk(var
           4. x=0;ximgData.width;x =30){
           untuk(var
           5. y=0;yimgData.height;y =30){
           var
           6. i = (y*imgData.width x)*4
           if(imgData.data[i 3]
           7. >0){
           dd dd
                                                                           
           9.                                                               
           }
           if(dd/(imgData.width*imgData.height/900)
           0.4
           12. ){ canvas.className
           =
           13. "noOp" }
           },100)

           15. Ini boleh menghalang pengguna daripada mengklik secara liar ke tahap yang paling besar Jika terdapat kaedah semakan lain yang lebih baik, sila berikan pendapat anda, terima kasih.

               Pada langkah ini, segala-galanya telah ditulis, dan kemudian tiba masanya untuk menguji Hasilnya masih terperangkap pada android, jadi saya terpaksa memikirkan cara lain Akhirnya, saya menemui atribut globalCompositeOperation Persekitaran lukisan. Nilai lalai sifat ini adalah atas sumber, iaitu, ia akan ditindih apabila anda melukis pada piksel sedia ada, tetapi terdapat juga sifat yang dipanggil destinasi-keluar imej sumber. Hanya bahagian imej sasaran di luar imej sumber akan dipaparkan dan imej sumber adalah lutsinar. Nampaknya sukar untuk difahami, tetapi sebenarnya, jika anda mengujinya sendiri, anda akan mendapati bahawa ia adalah sangat mudah, iaitu, apabila anda melukis berdasarkan piksel sedia ada, piksel yang sedia ada di kawasan yang anda lukis akan menjadi telus boleh tukar terus dengan tengok gambar Mudah faham:
               

               Ilustrasi kesan atribut globalCompositeOperation.
               Dengan atribut ini, ia bermakna tidak perlu menggunakan klip, dan tidak perlu menggunakan sin atau cos untuk mengira kawasan keratan hanya menggunakan garis tebal, yang boleh mengurangkan kos pengiraan dikurangkan, dan panggilan ke API persekitaran lukisan dikurangkan Prestasinya dipertingkatkan, dan berjalan pada Android sepatutnya lebih lancar:

               
               

               Kod XML/HTMLSalin kandungan ke papan keratan

               1. //Mencapai kesan pemadaman dengan mengubah suai globalCompositeOperation
               2. fungsi tapClip(){
               3. var segera = "ontouchstart" dalam tetingkap?true:false,
               4.  tekan mula = segera?"touchstart":"mousedown", 
               5.  tapmove = cepat?"touchmove":"mousemove", 
               6. tapend = cepat?"touchend":"mouseup";
                
               canvas.addEventListener(tapstart, function(e){
               clearTimeout(timeout)
               e.preventDefault();
                
                
               12. x1 = gegas?e.targetTouches[0].pageX:e.clientX-canvas.offsetLeft ;
                
               13. y1 = cepat?e.targetTouches[0].pageY:e.clientY-canvas.offsetTop ;
                
                
               15. ctx.lineCap = "bulat"; //Tetapkan kedua-dua hujung garisan sebagai lengkok
                
               16. ctx.lineJoin = "bulat"; //Tetapkan garisan bertukar kepada lengkok
               17. ctx.lineWidth = a*2;
               ctx.globalCompositeOperation
               18. = "destination-out"  
               19. ctx.save();
               20. ctx.beginPath()
               21. ctx.arc(x1,y1,1,0,2*Math.PI);
               ctx.fill();
               ctx.restore();
                
               canvas.addEventListener(tapmove, tapmoveHandler);
               25. canvas.addEventListener(tapend, function(){
               26. canvas.removeEventListener(tapmove, tapmoveHandler
               27.                                                        
               　　　
               28. masa tamat
               =
               29. setTimeout
               (fungsi(){
               31.              var imgData = ctx.getImageData(0,0,canvas.width,canvas.height,);   
               32.              var dd = 0;   
               33.              untuk(var x=0;x 🎜>imgData.width;x =30){   
               34.                  untuk(var y=0;y 🎜>imgData.height;y =30){   
               35.                       var i = (y*imgData.width   x)*4;   
               36.                     jika(imgData.data[i 3] > 0){   
               37.                          dd   
               38.                     }   
               39.                 }   
               40.             }   
               41.             if(dd/(imgData.width*imgData.height/900)0.4){   ){   
               42.                 canvas.className = "noOp";   
               43.             }   
               44. 　　　　　　　},100)   
               45.         });   
               46.         fungsi tapmoveHandler(e){   
               47.             e.preventDefault()   
               48.             x2 = gegas?e.targetTouches[0].pageX:e.clientX-canvas ;   
               49.             y2 = gegas?e.targetTouches[0].pageY:e.offsetY-canvas ;   
               50.                
               51.             ctx.save();   
               52.             ctx.moveTo(x1,y1);   
               53.              ctx.lineTo(x2,y2);   
               54.             ctx.stroke();   
               55.             ctx.restore()   
               56.                
               57.              x1 = x2;   
               58.              y1 = y2;   
               59.         }   
               60.     })   
               61. }   

               　　擦除那部分代码就这么一点，也就相当于画图功能，直接设置line后接设置line后接设置line条，只要事前把globalCompositeOperation设成destination-out，你所进行的一切绘制，都变成了擦除效果。鼠标滑动触发的事件里面代码也少了很多，绘图对象的调用次少也减了，性能提升大大滴。

               　　改好代码后就立即用自己的android机子测试了一下，果然如此，跟上一且，一个了一下，果然如此，跟上一且，更天少达到了客户要求的能玩的地步了。

               　　源码地址：https://github.com/whxaxes/canvas-test/blob/gh-pages/src/Funny-demo/clip/clip.html