canvas簡單動畫案例（圓圈閃爍漸變動畫）

ICY___發表於2019-02-23
Canvas動畫

canvas的第二篇部落格，終於開始做動畫了，不得不說，canvas是真的強，雖然寫起來不是那麼順手，但是實現的東西真的讓我很滿意。

實現效果：

主要思想：隨機畫出圓圈，然後利用計時器動態重繪，實現圓圈的變化，動態移除；

程式碼如下，註釋已寫：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
    // 圓圈動畫
    // 物件導向開發
    var animate={
        screen_w:document.documentElement.clientWidth,//獲取顯示區域的寬高 定義以後需要的變數
        screen_h:document.documentElement.clientHeight,
        content2d:null,
        x:null,
        y:null,
        r:10,
        Hz:0,
        arc:[],
        randomloc:function(){//隨機 x y 座標
            var x=Math.floor(Math.random()*this.screen_w);
            var y=Math.floor(Math.random()*this.screen_h);
            return[x,y];
        },
        randomcolor:function(){//隨機顏色（16777216=256*256*256）
            return '#'+parseInt(Math.random()*16777216).toString(16);//16進位制顏色
        },
        draw:function(){//畫出圓圈
            this.x=this.randomloc()[0];
            this.y=this.randomloc()[1];
            this.content2d.beginPath();//開始畫圖
            var color=this.randomcolor();
            this.content2d.strokeStyle=color;
            this.content2d.arc(this.x,this.y,this.r,0,Math.PI*2);
            this.content2d.stroke();//閉合線圈
            this.content2d.closePath();//結束畫圖
            this.arc.push(
                [this.x,this.y,this.r,color,0]
            );//arc儲存所有的圓圈的座標半徑和顏色
        },
        // 初始化
        init:function(){
            var canvas=document.getElementById('canvas');//獲取canvas元素
            canvas.width=this.screen_w;//畫布大小為螢幕顯示大小
            canvas.height=this.screen_h;
            this.content2d=canvas.getContext('2d');//2d模式
        },
        // 圓圈動畫，刪除圓圈（相當於動態改變半徑值重繪）
        update:function(){
            for(var i=0;i<this.arc.length;i++){
                //清除當前的圓圈
                this.content2d.clearRect(this.arc[i][0]-this.arc[i][2]-1,this.arc[i][1]-this.arc[i][2]-1,this.arc[i][2]*2.2,this.arc[i][2]*2.2);
                this.content2d.beginPath();
                var color=this.arc[i][3];
                this.content2d.strokeStyle=color;
                this.arc[i][2]++;//半徑增加
                if(this.arc[i][2]>20){//如果半徑大於20，執行計數器，當計數器大於4時，移除當前圓圈
                    this.arc[i][2]=10;
                    this.arc[i][4]++;
                    if(this.arc[i][4]>4){
                        this.arc.splice(i,1);
                        i--;
                        continue;
                    }
                }
                this.content2d.arc(this.arc[i][0],this.arc[i][1],this.arc[i][2],0,Math.PI*2);//重繪
                this.content2d.stroke();
                this.content2d.closePath();

            }
        }
    }
    animate.init();
    window.requestA=(function(){// h5計時器 利用螢幕重新整理率重新整理，效能很好，此為相容性寫法
        return window.requestAnimationFrame ||
                webkitRequestAnimationFrame ||
                mozRequestAnimationFrame ||
                msquestAnimationFrame||
                function(callback){
                    setTimeout(callback,1000/60);
                }
        
    })();
    (function loop(){//自執行函式，動態繪圖
        window.requestA(loop);
        animate.Hz++;
        if(animate.Hz>1){
            animate.Hz=0;
            animate.draw();
            animate.update();
        }
    })();
    </script>
</body>
</html>

不留個言嘛~

相關文章