Artikel ini berbagi prinsip implementasi, kode implementasi, dan masalah yang dihadapi dalam proses implementasi kanvas menghapus animasi untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Prinsipnya adalah untuk menghapus gambar tertentu pada perangkat seluler dan menampilkan gambar lain, menggunakan kanvas untuk mengimplementasikannya.
Jika pengguna menghapus secara manual, Anda perlu mendengarkan TouchMove, Touchend dan acara lainnya, hitung koordinat yang sesuai, dan gunakan Canvas ClearRect atau Rect untuk menggambar busur atau garis untuk mencapai ini. Namun, ini akan menyebabkan lag di ponsel Androd.
Canvas memiliki properti GlobalCompositeoperation. Nilai default dari properti ini adalah sumber-lebih, yaitu, akan ditumpangkan ketika Anda menggunakan piksel yang ada. Namun, ada atribut lain yang merupakan tujuan-keluar, yaitu, ketika menampilkan gambar target Anda di luar gambar sumber, yaitu, ketika menggambar berdasarkan piksel yang ada, piksel yang ada di area yang Anda gambar akan ditetapkan transparan. Dengan atribut ini, itu berarti Anda tidak perlu menggunakan serangkaian fungsi seperti klip. Anda bisa menggunakan garis atau busur tebal. Ini akan mengurangi panggilan ke API lingkungan gambar, meningkatkan kinerja, dan berjalan di Android jauh lebih halus.
Ini kode penghapusan saya:
Biarkan requestAnimationFrame = window.RequestanimationFrame || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.msrequestanimationFrame; biarkan contancanimationframe = window.cancelanimationframe || window.mozCancelAnimationFrame;let a = 60;let canvasCleaner = document.getElementById('cas-1');let ctxCleaner = canvasCleaner.getContext('2d');let canvasCleanerBox = document.querySelector('.slide-4');let imgCleaner = new Image();canvasCleaner.width = canvascleanerbox.clientwidth * 2; canvascleaner.height = canvascleanerbox.clientHeight * 2; canvascleaner.style.width = canvascleanerbox.clientwidth + 'px'; canvascleaner.style.height = clientwidth + 'px'; 'px'; imgcleaner.src = 'https://gw.alicdn.com/tps/tb1xbyckvxxxxxxxxxxxxxx-1080-1920.jpg';imgcleaner.onload = () => {let wedth = parseint.aMgcleaner.onload = () => {let wedth = parseint.aMgclean.onLoad = () => {let wedth = parseinteint (asaspleaner.onload = () => {let wl wedth = parseinteint.ascleaner.onload = () => {let wideth = parseinteint.ascleaner.onload = () = {let wl wideth = parseinteint.aMgclean.on w = canvascleaner.width*(imgcleaner.height/imgcleaner.width); ctxcleaner.drawimage (imgcleaner, 0, 0, canvascleaner.width, w); ctxcleaner.linecap = 'round'; // linecap set properti atau mengembalikan gaya tutup garis di ujung garis. ctxcleaner.linejoin = 'round'; ctxcleaner.linewidth = 100; // atur atau kembalikan lebar baris saat ini ctxcleaner.globalCompositeOperation = 'destination-out';} Biarkan drawline = (x1, y1, ctx) => {ctx.save (); ctx.beginpath (); ctx.arc (x1, y1, a, 0, 2 * math.pi); CTX.FILL (); // Metode Fill () mengisi gambar saat ini (jalur). Warna default berwarna hitam. ctx.restore ();};/* d Untuk menghapus koordinat titik area, data yang saya peroleh dengan mensimulasikan bentuk yang perlu dihapus oleh diri saya sendiri mirip dengan yang berikut: Misalkan d2 = [ [1.190], [30.180], [60.170], [90.168], [120.167], [150.165], [180.164], [210.163], [240.160], [270.159], [300.15444444444444444], [260], [260.160], [240.160], [240.160], [240.160], [240.160], [240.160], [240.160], [240], [240], [240], [240], [240], [240], [240], [240], [240], [240.160. [390.150], [420.140], [450.130], [480.120], [510.120], [540.120], [570.120], [600.120], [630.120], [660.120], [600.120], [630.120], [660.120], [690.120], [720.120], [1.190], [20.189], [28.186], [45.185], [50.185], [62.184], [64.182], [90.180], [120.178], [160.176], [200.174], [240.172];*/let draw = (d, ctx) => {if (idx> = d.length) {cancelanimationFrame (ts); } else {drawline (d [idx] [0], d [idx] [1], ctx); idx ++; requestanimationframe (() => {draw (d, ctx);}); }}Karena saya menampilkan animasi penghapusan langsung di halaman dan tidak mengharuskan pengguna untuk menghapusnya sendiri, sehingga koordinat area penghapus dihitung oleh diri saya sendiri. Kemudian gunakan RequestAnimationFrame untuk mengimplementasikan animasi. Saya mulai menggunakan setInterval. Saya menemukan bahwa setInterval akan selalu kacau setelah itu, jadi disarankan untuk tidak menggunakan setInterval.
Dalam proses mencapai efek ini, saya menemukan bahwa ketika menggunakan kanvas untuk menggambar pada halaman, gambar menjadi sangat buram?
Ternyata itu karena ada properti DevicePixelRatio di variabel jendela browser, yang menentukan bahwa browser akan menggunakan beberapa (biasanya 2) poin piksel untuk membuat piksel. Artinya, dengan asumsi bahwa nilai DevicePixelRatio adalah 2, gambar dengan ukuran 100*100 piksel akan diterjemahkan dengan lebar 2 piksel dalam gambar. Oleh karena itu, gambar akan benar -benar menempati 200*200 piksel pada layar retina, yang setara dengan gambar yang dua kali diperbesar, sehingga gambar menjadi kabur.
Dengan cara ini masalah tentang kanvas akan mudah dipecahkan. Kita bisa memperlakukan kanvas sebagai gambar. Ketika browser membuat kanvas, itu akan menggunakan lebar 2 piksel untuk membuat kanvas, sehingga gambar atau teks yang ditarik akan kabur di sebagian besar perangkat retina.
Demikian pula, ada juga properti webkitbackingstorePixelRatio (hanya safari dan chrome) dalam konteks kanvas. Nilai properti ini menentukan bahwa browser akan menggunakan beberapa piksel untuk menyimpan informasi kanvas sebelum memberikan kanvas. Nilai dalam Safari di bawah IOS6 adalah 2. Oleh karena itu, jika gambar 100*100 digambar di Safari, gambar pertama akan menghasilkan gambar 200*200 dalam memori, dan kemudian ketika browser menerjemahkannya, itu akan menjadikannya sebagai gambar 100x100, jadi itu menjadi 200x200, yang persis sama dengan gambar dalam memori, sehingga tidak akan ada masalah distorsi dalam Safari. Namun, ada distorsi di Safari di Chrome dan IOS7. Alasannya adalah bahwa nilai webkitbackingstorePixelRatio dari safari di Chrome dan iOS7 keduanya 1.
Larutan:
canvas.width = canvasbox.clientwidth * 2; canvas.height = canvasbox.clientheight * 2; canvas.style.width = canvas.clientwidth + 'px'; canvas.style.height = canvas.clientheight * 'px'; canvas.width*(img.height/img.width); // console.log (w); ctx.drawimage (img, 0, 0, canvas.width, w);
Artinya, Anda dapat membuat kanvas yang dua kali ukuran aktual, dan kemudian menggunakan gaya CSS untuk membatasi kanvas dengan ukuran sebenarnya. Atau gunakan Polyfill ini di GitHub, tetapi saya mencobanya dan sepertinya tidak berhasil.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.