canvas實現粒子塗鴉效果
阿新 • • 發佈：2019-02-10
最近閒來無事，便去研究canvas，因為canvas可以實現很多炫麗的動畫效果，所以就想研究一番，正好看見網上有哥們實現了一個類似的粒子效果，覺得挺不錯的，於是乎自己就動手也寫了一個。好了，話不多說，直接看效果吧。
效果圖
HTML原始碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>粒子特效</title> <style> html , body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; position: relative; } #myCanvas { background-color: #000; cursor: crosshair; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script src="../js/particle.js"></script> </body> </html>
particle.js 原始碼
/** * Created by 004928 on 2017/8/2. */ (function (window) { window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ; window.cancelRequestAnimationFrame = window.cancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.webkitCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame ; var w , h ; // 畫布寬高 var particles = []; // 粒子集合 var temp = []; var points = []; // 每個粒子座標物件的集合 var delayTime = 2000 ; // 位移動畫執行的延遲時間 var maxRadius = 7 ; // 粒子圓的最大半徑 var animationIncrement = 0.08 ; // 粒子縮放時的增減量 var offsetY = 7 , offsetX = 7 ; // x , y 軸每隔7個畫素點取值 var speed = 20 ; // 粒子運動速度 // 粒子顏色庫 var colors = [ '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722' ]; var down = false , move = false ; var requestId , timeId; var canvas = null ; var ctx = null ; /** * 初始化canvas */ function initCanvas() { canvas = document.getElementById("myCanvas"); w = window.innerWidth ; h = window.innerHeight ; canvas.setAttribute('width', w); canvas.setAttribute('height', h); if(canvas.getContext) { ctx = canvas.getContext('2d'); bindEvent(); } } /** * cnavas 繫結事件 */ function bindEvent() { canvas.addEventListener('mousedown' , function (e) { down = true ; stopAnimation(); }); canvas.addEventListener('mousemove' , function (e) { if(down) { move = true ; drawPath({ x:e.offsetX , y:e.offsetY }); } }); canvas.addEventListener('mouseup' , function (e) { down = false ; if(move) { throttle(graffiti , window); } move = false ; }); } /** * 塗鴉 */ function graffiti () { initParticle(); randomDraw(); start(); points = [] ; } /** * 節流函式 */ function throttle (method , context) { clearTimeout(method.tId); method.tId = setTimeout(function () { method.call(context); } , delayTime); } /** * 繪製路徑 */ function drawPath (point) { points.push(point); ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(point.x , point.y , Math.floor(Math.random() * maxRadius + 1) , 0 , 2 * Math.PI); ctx.fill(); } /** * 初始化粒子個數 */ function initParticle () { particles = [] ; temp = [] ; // 拿到畫布的所有畫素點資訊 // 每個畫素點包含了rgba 四個值， // 而這個pxData是一個一維陣列,每4位儲存一個畫素點資訊 var pxData = ctx.getImageData(0 , 0 , w , h); // 將4位表示的畫素點資訊，轉化為1位來表示， // 即陣列中的每個元素表示一個畫素 var buffer32 = new Uint32Array(pxData.data.buffer); // 找到陣列中有畫素資訊的點，並建立粒子 // 因為陣列是一維陣列，j * w + i 計算當前遍歷的陣列下標 for(var j = 0 ; j < h ; j += offsetY) { for(var i = 0 ; i < w ; i += offsetX) { if(buffer32[ j * w + i]) { particles.push(new Particles(i , j , colors[i % colors.length])); // 在移動粒子的時候需要用到 temp.push(new Particles(0 , 0 , colors[i % colors.length])); } } } } /** * 首先隨機繪製在螢幕上 */ function randomDraw () { ctx.clearRect( 0 , 0 , w , h); for(var l = 0 ; l < temp.length ; l ++) { var p = temp[l]; setRadius(p); if(p.x == 0) p.x = randomInteger(w); if(p.y == 0) p.y = randomInteger(h); draw(p); } requestId = requestAnimationFrame(randomDraw); } /** * 隨機產生 1 - max 之間的整數 * @param max * @returns {number} */ function randomInteger (max) { return Math.floor(Math.random() * max + 1); } /** * 粒子物件 */ function Particles (x , y , color) { this.x = x ; this.y = y ; this.color = color ; // 粒子顏色 this.r = Math.floor(Math.random() * maxRadius + 1); // 隨機產生粒子的半徑 1 - 5 this.zoom = Math.floor(Math.random() * 2) == 0 ? -1 : 1 ; // 0 表示縮小，1表示放大 } /** * 迴圈執行動畫 */ function loop () { ctx.clearRect( 0 , 0 , w , h); for(var l = 0 ; l < particles.length ; l ++) { var p = particles[l]; var t = temp[l]; calcPosition(p , t); setRadius(t); draw(t); } requestId = requestAnimationFrame(loop); } /** * 2s 之後 聚合成要顯示的文字樣式 */ function start () { timeId = setTimeout(function () { cancelRequestAnimationFrame(requestId); loop(); } , delayTime); } /** * 設定粒子的半徑（遞增/遞減） */ function setRadius (p) { if(p.zoom > 0) { p.r += animationIncrement ; if(p.r >= maxRadius ) p.zoom = -1 ; } else { p.r -= animationIncrement ; if(p.r <= 1) p.zoom = 1 ; } } /** * 計算粒子的位置 */ function calcPosition (p , t) { var vx = ( p.x - t.x ) / speed ; var vy = ( p.y - t.y ) / speed ; t.x += vx ; t.y += vy ; if(vx > 0) { if(t.x >= p.x ) t.x = p.x ; } else { if(t.x <= p.x ) t.x = p.x ; } if(vy > 0) { if(t.y >= p.y ) t.y = p.y ; } else { if(t.y <= p.y ) t.y = p.y ; } } /** * 繪製粒子 * @param t */ function draw (t) { ctx.fillStyle = t.color; ctx.beginPath(); ctx.arc(t.x , t.y , t.r , 0 , 2 * Math.PI); ctx.fill(); } /** * 停止動畫 */ function stopAnimation () { if(requestId || timeId) { cancelRequestAnimationFrame(requestId); clearTimeout(timeId); requestId = timeId = null ; ctx.clearRect(0 , 0 , w, h); } } window.onload = initCanvas ; })(window);
原理
其實這個特效主要分為兩個部分
- 1.粒子本身的縮放
- 2.粒子位置的移動
粒子本身的縮放
其實每個粒子本身就是一個圓，只要改變每次改變圓的半徑從大到小，再從小到大，就可以實現縮放的效果
粒子位置的移動
首先記錄繪製在介面上粒子的位置，然後再隨機顯示在介面上，然後再計算此時的粒子距離之前粒子的位置
計算之間的距離，然後移動過去即可。
其實原理比較簡單，下面來解讀下原始碼！
原始碼解析
其實主要的邏輯在 initParticle 方法，通過 ctx.getImageData 拿到畫布上所有的畫素點資訊
得到的資料是一個一維陣列，且每4個數據表示一個畫素點資訊比如 [0,0,0,1 ,0,2,3,0] ,我們可以看到
這個陣列中有8個值,那麼前面4個值表示第一個畫素點資訊，後面4個表示第二個畫素點資訊。
且4個值分別對應 r , g , b , a 這四個值。
然後通過 Uint32Array方法將4位表示一個畫素點資訊的資料，變成1位表示一個畫素點的陣列
因此上面8位的陣列就變[001100 , 003300](資料我是瞎編的，忽略)
然後遍歷轉換後的陣列，凡是有值的，就是出現在介面上的點（大家可以在canvas上寫段文字，然後列印ctx.getImageData獲取到的資料便知）
for(var j = 0 ; j < h ; j += offsetY) {
for(var i = 0 ; i < w ; i += offsetX) {
if(buffer32[ j * w + i]) {
particles.push(new Particles(i , j , colors[i % colors.length]));
// 在移動粒子的時候需要用到
temp.push(new Particles(0 , 0 , colors[i % colors.length]));
}
}
}
如上，即可拿到所有繪製在介面上的粒子，因為陣列是一維的，而粒子要繪製在介面上是需要X,Y座標的，
所有這裡用兩層for迴圈，來得到每個粒子的x,y座標
- offsetX，offsetY 橫豎每次間隔多少畫素才去取資料，這樣出來的粒子才會排列不一
基本上拿到粒子之後，然後隨機繪製在介面上，詳見 randomDraw 方法
然後迴圈執行 loop 方法，遍歷每個粒子，計算位置，設定半徑，即可看到效果。
主要的邏輯都在particle.js中，其他方法都比較簡單，主要是initParticle方法中的邏輯。
另外，js程式碼我沒有怎去去封裝了，勿吐槽。
Github 原始碼下載