圓周運(yùn)動(dòng)的原理

圓周運(yùn)動(dòng)1.PNG

如上圖所示，其實(shí)圓周運(yùn)動(dòng)，就是通過運(yùn)動(dòng)的角度deg來求出物體在x軸和y軸上運(yùn)動(dòng)的偏移量，分別為radius*Math.cos(deg)和radius*Math.sin(deg)。

了解了上述原理之后，就可以開始寫一個(gè)隨機(jī)圓周運(yùn)動(dòng)的DEMO，效果圖如下

圓周運(yùn)動(dòng).PNG

基本的設(shè)計(jì)思路

*利用面向?qū)ο蟮乃枷雱?chuàng)建一個(gè)圓模型對象。

*再創(chuàng)建一個(gè)幀動(dòng)畫模型。

*創(chuàng)建實(shí)例，執(zhí)行動(dòng)畫。

創(chuàng)建圓模型對象

將畫圓形的x,y坐標(biāo)、半徑、初始角度、顏色、寬度等要素，封裝在圓模型這個(gè)對象的構(gòu)造函數(shù)里面，然后通過給原型添加方法，一個(gè)是draw畫圓形的方法和move圓形運(yùn)動(dòng)的方法，讓所有圓形的實(shí)例共享這些方法，還有自己相應(yīng)的屬性，這里用到了，構(gòu)造函數(shù)模式和原型模式創(chuàng)建對象的方法思想。

var Square = function(x,y,radiu,option){
        this.wid = canvas.width;
        this.hei = canvas.height;
        this.ctx = ctx;
        this.x = x;
        this.y = y;
        this.radiu = radiu;
        this.option = option;
        this.radius = Math.random()*5 + 1;
        this.angle = 0;//圓周運(yùn)動(dòng)的初始角度
    };
    Square.prototype = {
        draw:function(){
            this.ctx.beginPath();
            this.ctx.strokeStyle = this.option.strokeStyle;
            this.ctx.lineWidth = this.option.lineWidth;
            this.ctx.arc(this.x,this.y,this.radiu,0,2*Math.PI,true);
            this.ctx.stroke();
        },
        move:function(){
            /*根據(jù)角度計(jì)算出x軸和y軸的偏移量*/
            this.x += this.radius*Math.cos(this.angle*(Math.PI/180));
            this.y += this.radius*Math.sin(this.angle*(Math.PI/180));
            this.angle+=5;//角度每次遞增5個(gè)像素
            this.draw();
        }
    };

創(chuàng)建幀動(dòng)畫對象

同樣的道理創(chuàng)建幀動(dòng)畫對象，并且增加一個(gè)存放圓實(shí)例的數(shù)組，每實(shí)例化一個(gè)圓形，就將它存到數(shù)組中，然后每次render渲染之前，都先把之前的畫布清除掉，然后執(zhí)行start方法循環(huán)地渲染畫布，達(dá)到動(dòng)畫的效果。

var Far = function(){
        this.width = canvas.width;
        this.height = canvas.height;
        this.ctx = ctx;
        this.timer = null;
        this.squares = [];//創(chuàng)建數(shù)組，用于存放圓實(shí)例
    };
    Far.prototype = {
        //循環(huán)渲染
        start : function(){
            this.timer = setInterval((function(param){
                return function(){param.render();}
            })(this),30);
        },
        //渲染方法
        render : function(){
            /*將之前的畫布清除掉*/
            this.ctx.clearRect(0,0,canvas.width,canvas.height);
            /*遍歷每個(gè)圓實(shí)例，讓這些圓角度發(fā)生變化，從而讓運(yùn)動(dòng)軌跡發(fā)送變化*/
            for(i in this.squares){
                this.squares[i].move();
                /*圓角度增加判斷*/
                if(this.squares[i].angle>360){
                    this.squares[i].angle = 0;
                }
            }
        }
    };

最后創(chuàng)建實(shí)例完成動(dòng)畫效果

/*創(chuàng)建幀實(shí)例*/
    var frame = new Far();
    /*創(chuàng)建圓實(shí)例*/
    for(var i=0;i<500;i++){
        /*圓的所有屬性都是一定范圍內(nèi)的隨機(jī)數(shù)*/
        var x = Math.random()*(canvas.width);
        var y = Math.random()*(canvas.height);
        var radiu = Math.random()*20;
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var a = Math.random();
        var option = {
            strokeStyle : 'rgba('+r+','+g+','+b+','+a+')',
            lineWidth : Math.random()*10
        };
        //把圓實(shí)例放到幀模型的數(shù)組中
        frame.squares[i] = new Square(x,y,radiu,option);
    }
    //開始渲染
    frame.start();

完整代碼地址：https://github.com/McRayFE/CanvasCircle