canvas基礎之動態線條---致敬windows98

weixin_34378969發表於2017-05-31
CanvasWindows

還記得這貨嗎？初中每週一節的計算機課，因為不能聯網，所以基本上半節課都在玩兒這個螢幕保護圖案...就是這麼無聊，但卻有滿滿的回憶。
最近一直忙於寫原生JS，對於H5和CSS3略有生疏，於是拿出一個經典的圖形來練練canvas的一些基本知識。

4317751-107cde0ffb137916.jpg
win98.jpg

先來html和css部分，簡單的韓紅看了想打人：

<body>
<canvas  id="can"></canvas>
</body>

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        canvas{
            background:#000;
        }
    </style>

廢話不囉嗦，直接進入js部分，上程式碼：

<script>
        function ran(n,m){
            return parseInt(Math.random()*(m-n)+n)
        }
        window.onload=function(){
            var oC=document.querySelector('#can');
            var gd=oC.getContext('2d');//建立2D畫筆
            var winW=document.documentElement.clientWidth;
            var winH=document.documentElement.clientHeight;
            oC.width=winW;
            oC.height=winH;
            var Len=15;//尾巴個數
            var N=5; //轉折點個數
            var arr=[]; //存每個轉折點的xy座標和x軸y軸運動速度
            for(var i=0;i<N;i++){
                arr[i]={
                    x:ran(0,winW),
                    y:ran(0,winH),
                    iSpeedX:ran(-10,10),
                    iSpeedY:ran(-10,10)
                }
            }
            var pw=1;//每個轉折點的寬
            var ph=1;//每個轉折點的高
            var oldArr=[];//存第一個線條

            function draw(json){
                gd.fillStyle = '#fff';
                gd.fillRect(json.x-pw/2,json.y-ph/2,pw,ph)
            }

            setInterval(function(){
                //先準備五個點
                gd.clearRect(0,0,oC.width,oC.height);
                for(var i=0;i<arr.length;i++){
                   //邊界 碰到邊界反向掉頭繼續運動
                   if(arr[i].x<=100){
                        arr[i].x=100;
                        arr[i].iSpeedX*=-1;
                    }else if(arr[i].x>=oC.width-100){
                        arr[i].x=oC.width-100;
                        arr[i].iSpeedX*=-1;
                    }
                    if(arr[i].y<=100){
                        arr[i].y=100;
                        arr[i].iSpeedY*=-1;
                    }else if(arr[i].y>=oC.height-100){
                        arr[i].y=oC.height-100;
                        arr[i].iSpeedY*=-1;
                    }
                    arr[i].x+=arr[i].iSpeedX;
                    arr[i].y+=arr[i].iSpeedY;
                    draw(arr[i]);
                }
                
        //開始沿著五個點畫線
                gd.beginPath();//重新開啟畫筆
                gd.moveTo(arr[0].x,arr[0].y);//起始位置
                for(var i=1;i<arr.length;i++){
                    gd.lineTo(arr[i].x,arr[i].y)
                }//路徑
                gd.closePath();//閉合路徑
                gd.strokeStyle = 'rgb('+ran(0,255)+','+ran(0,255)+','+ran(0,255)+')';
                gd.stroke();//描邊
               
         //畫剩下的幾條線
                var arr2=[];//存新的點
                for(var i=0;i<arr.length;i++){
                    arr2[i]={
                        x:arr[i].x,
                        y:arr[i].y
                    }
                }
                
                oldArr.push(arr2);//****存上次的資料

吶，重點來了，敲黑板！！其實第二條線是延續第一條線200ms前的路徑，第三條線是延續第一條線400ms前的路徑，so，只要mei200ms存夠15次路徑就夠用了。

              if(oldArr.length>Len){
                    oldArr.shift();
                }//保證只有十五條資料就夠了
                for(var i=0;i<oldArr.length;i++){
                    gd.beginPath();
                    gd.moveTo(oldArr[i][0].x,oldArr[i][0].y);
                    for(var j=1;j<oldArr[i].length;j++){
                        gd.lineTo(oldArr[i][j].x,oldArr[i][j].y);
                    }
                    gd.closePath();
                    gd.strokeStyle = 'rgb('+ran(0,255)+','+ran(0,255)+','+ran(0,255)+')';
                    gd.stroke();
                }
            },200)
        }
    </script>

H5 canvas基礎的確很簡單，但是要落實到每一個具體效果上，還要有清晰的邏輯並且巧妙的結合JS才能完成，加油！

相關文章