打造高大上的Canvas粒子(一)

HTML5 Canvas

<canvas>标签定义图形，比如图表和其他图像，必须用脚本（javascript）绘制图形.

举例：绘制矩形

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");  //找到canvas元素
ctx.fillStyle = "#FF0000";    //创建context对象
ctx.fillRect(0,0,150,75); 
 //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：
//设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
//fillRect(x,y,width,height); 定义去腥的填充方式
</script>

打造Canvas粒子动画

效果：

创建步骤：

<canvas id="myCanvas" width="900" height="592">您的浏览器不支持canvas</canvas>
<script>
    /**
     * 参数描述
     * image:image或者canvas对象
     * sx,sy 源对象的x,y坐标 可选
     * sWidth,sHeight 源对象的宽高   可选
     * dx,dy画布上x,y坐标
     * dWidth,dHeight 在画布上绘制的宽高  可选
     * stx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
     */
        (function(){
            var canvas = {},
                image = {},
                ctx = null;
            var particles = [];
            //获取canvas元素
            var canvas = document.getElementById('myCanvas');

            if(canvas.getContext) {

                //获取渲染上下文
                ctx = canvas.getContext('2d');

                //设置画布大小为屏幕宽高
                canvas.w = canvas.width = document.body.clientWidth;
                canvas.h = canvas.height = document.body.clientHeight;

                // console.log(canvas);

                //新建一个image对象
                var img = new Image();

                //图像加载完后
                img.onload = function() {
                    //把图像信息保存在image里面
                    image.obj = img;
                    image.w = img.width;
                    image.h = img.height;
                    image.x = parseInt(canvas.w/2 - image.w/2);
                    image.y = 150;

                    //把图像绘制到画布坐标为(100,100)的地方
                    ctx.drawImage(image.obj,image.x,image.y,image.w,image.h);
                    // 获取图像的像素信息，并根据像素信息重新绘制出粒子效果轮廓图，canvas有一个叫getImageData的接口，通过该接口可以获取到画布上指定位置的全部像素的数据：
                    image.imageData = ctx.getImageData(image.x,image.y,image.w,image.h);
                     console.log(image.imageData);
                    // 
                    //计算出符合要求的像素
                    calculate();

                    //计算后绘到画布上
                    draw();
                };

                //设置image的source
                img.src = 'img/pumpkin_evil.png';

            }
            //计算并保存坐标
            function calculate() {
                var len = image.imageData.length;
                //只保存100行，100列的像素值
                var cols = 100,
                    rows = 100;
                //设成150行，100列后每个单元的宽高
                var s_width = parseInt(image.w/cols),   
                    s_height = parseInt(image.h/rows);
                var pos = 0; //数组中的位置
                var par_x, par_y;  //粒子的x,y坐标
                var data = image.imageData.data;  //像素值数组
                for(var i = 0; i < cols; i++) {
                    for(var j = 0; j < rows; j++) {
                        //计算(i,j)在数组中的R的坐标值
                        pos = (j*s_height*image.w + i*s_width)*4;
                        //判断像素透明度值是否符合要求
                        if(data[pos+3] > 100){
                            var particle = {
                                //x,y值都随机一下
                                x: image.x + i*s_width + (Math.random() - 0.5)*20,
                                y: image.y + j*s_height + (Math.random() - 0.5)*20
                            }
                            // 根据图像不同的色值来设定粒子色值
                            if(data[pos+1] < 175 && data[pos+2] < 10) {
                                particle.fillStyle = '#ffa900';
                            } else if(data[pos+1] < 75 && data[pos+1] > 50) {
                                particle.fillStyle = '#ff4085';
                            } else if(data[pos+1] < 220 && data[pos+1] > 190) {
                                particle.fillStyle = '#00cfff';
                            } else if(data[pos+1] < 195 && data[pos+1] > 175) {
                                particle.fillStyle = '#9abc1c';
                            }
                            //符合要求的粒子保存到数组里
                            particles.push(particle);
                        }
                    }
                }
            }

            //绘图案
            function draw() {
                //清空画布                    
                ctx.clearRect(0,0,canvas.w,canvas.h);

                var len = particles.length;
                var curr_particle = null;

                for(var i = 0; i < len; i++) {

                    curr_particle = particles[i];

                    //设置填充颜色
                    ctx.fillStyle = curr_particle.fillStyle;
                    //绘粒子到画布上
                    ctx.fillRect(curr_particle.x,curr_particle.y,1,1);
                }
            }
        })()


    </script>

转载：https://isux.tencent.com/canvas-particle-animation.html