1. 程式人生 > >canvas實現粒子塗鴉效果

canvas實現粒子塗鴉效果

最近閒來無事,便去研究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 原始碼下載