打造高大上的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