canvas实现粒子涂鸦效果

来源：互联网发布：寻找质数的算法 python 编辑：程序博客网时间：2024/05/14 00:43

最近闲来无事，便去研究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 源码下载

阅读全文

0 0