HTML5 Canvas随机圆周运动

圆周运动的原理

HTML5 Canvas随机圆周运动_第1张图片
圆周运动1.PNG
如上图所示,其实圆周运动,就是通过运动的角度deg来求出物体在x轴和y轴上运动的偏移量,分别为radius*Math.cos(deg)radius*Math.sin(deg)

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

HTML5 Canvas随机圆周运动_第2张图片
圆周运动.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

你可能感兴趣的:(HTML5 Canvas随机圆周运动)