本文實例為大家分享了canvas擦除動畫的實現原理、實現代碼、以及在實現過程中遇到的問題,供大家參考,具體內容如下
原理總結為就是在移動設備上將某張圖片擦掉顯示另一張圖片,利用canvas來實現。
如果是用戶手動擦除,則需要監聽touchmove,touchend等事件,並計算相應的坐標,利用canvas的clearRect或rect 畫弧線或畫線來實現。但是這會造成在androd手機上存在卡頓的現象。
canvas有個globalCompositeOperation屬性,這個屬性的默認值是source-over,即當你在已有像素上進行繪圖時會疊加。但是還有一個屬性是destination-out,即在源圖像外顯示自己的目標圖像,也就是在已有像素基礎上繪圖時,你繪制的區域裡已有像素會被置為透明,有了這個屬性後就意味著不需要用到clip等系列函數,直接用粗線條或者弧線就可以了,這樣一來就減少繪圖環境api的調用,性能會得到提升,在android上運行也會流暢很多。
下面來展示下我的擦除代碼:
let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; let cancelAnimationFrame = 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 = canvasCleanerBox.clientHeight + 'px'; imgCleaner.src = 'https://gw.alicdn.com/tps/TB1XbyCKVXXXXXEXpXXXXXXXXXX-1080-1920.jpg'; imgCleaner.onload = ()=> { let width = parseInt(canvasCleaner.style.width); w = canvasCleaner.width*(imgCleaner.height/imgCleaner.width); ctxCleaner.drawImage(imgCleaner, 0, 0, canvasCleaner.width, w ); ctxCleaner.lineCap = 'round';//lineCap 屬性設置或返回線條末端線帽的樣式。 ctxCleaner.lineJoin = 'round'; ctxCleaner.lineWidth = 100;//設置或返回當前線條的寬度 ctxCleaner.globalCompositeOperation = 'destination-out'; } let drawline = (x1, y1,ctx)=> { ctx.save(); ctx.beginPath(); ctx.arc(x1,y1, a, 0, 2 * Math.PI); ctx.fill();//fill() 方法填充當前的圖像(路徑)。默認顏色是黑色。 ctx.restore(); }; /* d 為擦除區域點坐標,我自己模擬需要擦除的形狀得到的數據類似如下: let d2 = [ [1,190],[30,180],[60,170],[90,168],[120,167],[150,165],[180,164],[210,163],[240,160],[270,159],[300,154],[330,153],[360,152], [390,150],[420,140],[450,130],[480,120],[510,120],[540,120],[570,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); }); } }
因為我是直接在頁面上顯示擦除動畫,不需要用戶自己去擦,所以擦除區域的坐標都是我自己計算的。然後利用requestAnimationFrame來實現動畫,開始用的是setInterval,發現到後面setInterval總是會亂掉,所以建議不要使用setInterval。
在實現這個效果的過程中發現,利用canvas在頁面上drawImage時,圖片變的很模糊?
原來是因為在浏覽器的window變量中有一個 devicePixelRatio屬性,該屬性決定了浏覽器會用幾個(通常是2個)像素點來渲染一個像素。即假設devicePixelRatio的值為2,一張100*100像素大小的圖片,在retina屏幕下,會用2個像素點的寬度去渲染圖片的1個像素點,因此該圖片在retina屏幕上實際會占據200*200像素的空間,相當於圖片被放大了一倍,因此圖片變的模糊。
這樣關於canvas的問題就容易解決了。我們可以將canvas 當成是一張圖片,當浏覽器去渲染canvas的時候,他會用2個像素點的寬度去渲染canvas,因此在大多數retina設備的浏覽器中會出現繪制的圖片或文字模糊的情況。
類似的,在canvas context中也存在一個 webkitBackingStorePixelRatio屬性(僅safari 和chrome),該屬性的值決定了浏覽器在渲染canvas之前會用幾個像素來存儲畫布信息。在ios6下的safari中的值是2,因此,如果將一張100*100的圖片繪制在 safari中,該圖片首先會在內存中生成一張200*200的圖片,然後浏覽器渲染的時候,會按100x100的圖片來渲染,因此就變成了200x200,正好和內存中的圖片大小一致,因此在iOS的safari中不會出現失真的問題。但是在chrome和iOS7的safari中卻出現了失真,其原因是,chrome和iOS7中的safari的webkitBackingStorePixelRatio值都是1。
解決辦法:
canvas.width = canvasBox.clientWidth * 2; canvas.height = canvasBox.clientHeight * 2; canvas.style.width = canvas.clientWidth + 'px'; canvas.style.height = canvas.clientHeight * 'px'; w = canvas.width*(img.height/img.width); // console.log(w); ctx.drawImage(img, 0, 0, canvas.width , w);
即可以創建一個兩倍於實際大小的canvas,然後用css樣式把canvas限定在實際的大小。或者用github上的這個polyfill, 但是我試過了好像不太好用。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。