HTML5 Canvas随机圆周运动

圆周运动的原理

圆周运动1.PNG

如上图所示，其实圆周运动，就是通过运动的角度deg来求出物体在x轴和y轴上运动的偏移量，分别为radius*Math.cos(deg)和radius*Math.sin(deg)。

了解了上述原理之后，就可以开始写一个随机圆周运动的DEMO，效果图如下

圆周运动.PNG

基本的设计思路

*利用面向对象的思想创建一个圆模型对象。

*再创建一个帧动画模型。

*创建实例，执行动画。

创建圆模型对象

将画圆形的x,y坐标、半径、初始角度、颜色、宽度等要素，封装在圆模型这个对象的构造函数里面，然后通过给原型添加方法，一个是draw画圆形的方法和move圆形运动的方法，让所有圆形的实例共享这些方法，还有自己相应的属性，这里用到了，构造函数模式和原型模式创建对象的方法思想。

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;//圆周运动的初始角度
    };
    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(){
            /*根据角度计算出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个像素
            this.draw();
        }
    };

创建帧动画对象

同样的道理创建帧动画对象，并且增加一个存放圆实例的数组，每实例化一个圆形，就将它存到数组中，然后每次render渲染之前，都先把之前的画布清除掉，然后执行start方法循环地渲染画布，达到动画的效果。

var Far = function(){
        this.width = canvas.width;
        this.height = canvas.height;
        this.ctx = ctx;
        this.timer = null;
        this.squares = [];//创建数组，用于存放圆实例
    };
    Far.prototype = {
        //循环渲染
        start : function(){
            this.timer = setInterval((function(param){
                return function(){param.render();}
            })(this),30);
        },
        //渲染方法
        render : function(){
            /*将之前的画布清除掉*/
            this.ctx.clearRect(0,0,canvas.width,canvas.height);
            /*遍历每个圆实例，让这些圆角度发生变化，从而让运动轨迹发送变化*/
            for(i in this.squares){
                this.squares[i].move();
                /*圆角度增加判断*/
                if(this.squares[i].angle>360){
                    this.squares[i].angle = 0;
                }
            }
        }
    };

最后创建实例完成动画效果

/*创建帧实例*/
    var frame = new Far();
    /*创建圆实例*/
    for(var i=0;i<500;i++){
        /*圆的所有属性都是一定范围内的随机数*/
        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
        };
        //把圆实例放到帧模型的数组中
        frame.squares[i] = new Square(x,y,radiu,option);
    }
    //开始渲染
    frame.start();

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