canvas 粒子文字

時間 2019-11-07

標籤 canvas 粒子文字简体版

原文原文鏈接

無心間看到了我仍舊在這裏的《天天一點canvas動畫》的系列文章（表示感謝），"粒子文字" 這節感受很不錯，研究了一下，由於原做者加入了幾個與用戶交互的屬性可動態改變粒子文字動畫的樣式，且代碼也抽離的比較完全比較散，對於學習者我感受理解山學習起來挺費勁。因此呢這裏我把核心的代碼整理了出來但願對這個感興趣同窗能夠看看，只是把核心的代碼抽離了出來放在一個文件中，這樣方便理解和查看；而後再關鍵部分加入了一些註釋我本身的理解，有不對或不妥的地方的你們必定指出。先看效果圖（圖也是從[我仍舊在這裏]大神那拷貝來的，原諒我）。圖中左側的滑動tab的功能我這裏給去掉了以方便理解粒子動畫的核心：javascript

源碼如下：html

<!DOCTYPE html>
<html lang="len">
<head>
    <meta charset="utf-8"/>
    <title>文字粒子</title>
</head>
<body>
    <canvas id="canvas" width="1200" height="500" style="background: #ccc"></canvas>

    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById("canvas")
            var context = canvas.getContext("2d");
            var W = canvas.width = window.innerWidth,
                H = canvas.height = window.innerHeight,
                gridX = 7,
                gridY = 7,
                colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
                          '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
                          '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
                          '#FF5722'],
                durVal = 0.1;

            // 粒子
            function Particle(x, y){
                this.x = x;
                this.y = y;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.futurRadius = randomInt(1.1, 5.1);
                this.radius = 1.1;
                this.dying = false;
                this.base = [x, y];

                this.drawParticle = function(){

                    // 當前粒子變小到必定程度以後，每次將它的半徑+0.1，使其慢慢變大
                    if(this.radius < this.futurRadius && this.dying === false){
                        this.radius += durVal;
                    }else{//粒子已經到達最大狀態
                        this.dying = true; //表示粒子還處於show狀態
                    }

                    //每次-0.1
                    if(this.dying){
                        this.radius -= durVal;
                    }

                    context.save();
                    context.fillStyle = this.color;
                    context.beginPath();
                    context.arc(this.x, this.y, this.radius, Math.PI * 2, false);
                    context.closePath();
                    context.fill();
                    context.restore();

                    //將消失的粒子重置最初的狀態
                    if (this.y < 0 || this.radius < 1) {
                      this.x = this.base[0];
                      this.y = this.base[1];
                      this.dying = false;
                    }
                }
            }

            // 文本對像
            function Shape(text, size, x, y){
                this.text = text;
                this.size = size;
                this.x = x;
                this.y = y;
                this.placement = []; //文字的數據的位置信息
            }
            Shape.prototype.getValue = function(){
                context.textAlign = "center";
                context.font = this.size+"px arial";
                context.fillText(this.text, this.x, this.y);

                // 複製畫布上指定矩形的像素數據
                var idata = context.getImageData(0, 0, W, H);
                // data 屬性返回一個對象，是一個8位無符號整數的數組Uint8ClampedArray
                var buffer = new Uint32Array(idata.data.buffer);

                // 抽樣獲取圖像數據使用particle對象記錄下當前像素下數據的位置信息
                for(var i = 0; i < H; i += gridY){
                    for(var j = 0; j < W; j += gridX){
                        if(buffer[i * W + j]){
                            var particle = new Particle(j, i);
                            this.placement.push(particle);
                        }
                    }
                }
            }

            // 建立模型數據對象
            var word = new Shape("`(*∩_∩*)′", 200, W/2, H/2);
                // 調用getValue方法，獲取數據位置信息
                word.getValue();

            (function drawFrame(){
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, W, H);

                for (var i = 0; i < word.placement.length; i++){
                    //調用particle對像的drawParticle方法，開始畫布上畫
                    word.placement[i].drawParticle();
                }

            }())

            function randomInt(min, max) {
               return min + Math.random() * (max - min + 1);
            }
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。