利用面向對象的思路在canvas中為圖片添加飄雪效果

平時看到不錯的冬景照片想收藏起來,如果將其添加上飄雪的效果,更加美不勝收,比如下面效果

下面分享一下如果利用canvas為圖片添加飄雪效果,先看代碼,再分析;

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        canvas {  
            border:1px solid red;  
            /*添加背景圖片*/  
            background: url(img/snow.jpg);  
        }  
    </style>  
</head>  
<body>  
    <canvas id="can" width="800" height="600"></canvas>  
    <script type="text/javascript">  
        var can = document.getElementById("can");  
        var ctx = can.getContext("2d");  
        //定義一個隨機函數  
        function random(min,max){  
            return parseInt(Math.random()*(max-min)+min);  
        }  
        //創建一個動畫類  
        function AnimationClass(){  
            //雪花出現的坐標  
            this.x = random(0,can.width);//橫坐標隨機  
            this.y = 0;//縱坐標為0  
            this.radius = random(1,5);//雪花的半徑隨機  
            this.color = "white";//顏色紅色  
            this.speed = random(1,6);//雪花降落的速度隨機  
            this.startAngle = 0;//起始角度  
            this.endAngle = Math.PI*2;//終止角度  
        }  
        //給雪花動畫類添加一個方法  
        AnimationClass.prototype.draw = function(){  
            ctx.save();//儲存  
            ctx.fillStyle = this.color;//填充顏色  
            //繪制雪花  
            ctx.beginPath();  
            ctx.arc(this.x,this.y,this.radius,this.startAngle,this.endAngle);//畫圓  
            ctx.fill();  
            ctx.restore();  
            this.sport();//調用運動函數使雪花運動起來  
        };  
        //雪花運動原型方法  
        AnimationClass.prototype.sport = function(){  
            this.y += this.speed;//雪花y方向上的值累加  
        };  
        //創建一個雪花對象  
        var dataArr =[];  
        function show(){  
            can.height = can.height;//清除畫佈內容  
            var A = new AnimationClass();//創建一個雪花動畫A  
            dataArr.push(A);//將創建的雪花動畫儲存在數組dataArr中  
            //調用創建的數組中雪花對象方法  
            for (var i in dataArr){  
                dataArr[i].draw();  
            }  
            requestAnimationFrame(show);//循環調用  
        }  
        show();  
    </script>  
</body>  
</html> 

主要思路分析:

1)首先將背景圖片置入畫佈背景中

2)考慮到雪花的大小和運動速度都是隨機的,所以構造一個隨機函數random

3)創建一堆雪花之前先創建出一個雪花類,然後對這一個雪花不斷調用就可以得到很多雪花飄落的特效。

利用面向對象的思路分析一個雪花類具備的屬性和方法,屬性有雪花的起始位置(畫佈頂端),雪花顏色(白色),終止位置(畫佈底部),隨機速度范圍,繪制學畫圓形的起止角度。雪花類有兩個原型方法,一個是畫出雪花形狀的方法draw,另一個是運動方法sports,畫出來的這個雪花運動才有效果,所以畫出雪花後就調用sposts函數使其具備運動“性能”。

4)這樣雪花的屬性和方法由雪花類創建出來瞭,由於需要很多個雪花,就將創建的雪花實例放在數組中,然後調用雪花類的方法,將這些代碼封裝在一個show函數中,在裡面用requestAnimationFrame不斷自我調用,實現眾多雪花的效果。

發佈留言