canvas实现球体彩带（效果美翻）

效果演示

鼠标点击划过屏幕会有彩色小球向四周散射

项目源码 github地址 https://github.com/Zakisee/canvas/blob/master/球体彩带.html

 

 

主体思路

1 球体是一个对象 每个球体都是一个实例

这个思维很重要 因为每个球体都有自己的属性和运动方式  很适合面向对象的编程

function Ball(x,y) {
        this.x = x;
        this.y = y;
        this.r = 20;
        //每次变化的范围  控制在-10~20之间  这样效果是向四周发散  同时向下发散的多
        this.dx = parseInt(Math.random()*35)-10;
        this.dy = parseInt(Math.random()*35)-10;
        //随机颜色变化
        this.color = "rgba("+parseInt(Math.random()*256)+","+Math.random()*256+","+Math.random()*256+","+Math.random()+")";
        //将每个实例加入数组
        ballArr.push(this);
    }

注意这个数组 每小球实例都在数组里面 最后设置定时器 遍历数组即可控制所有小球

2 每个小球的半径都在慢慢减小

当减小定负数时会报错  所以得判断当减小为零时要从数组中找到自己并删除

 // 小球的位置在一个范围内波动
    Ball.prototype.update = function () {
        this.x += this.dx;
        this.y += this.dy;
//半径慢慢减小 直到小球消失
        this.r --;
        //半径小于0  从数组中删除
        if (this.r<0){
            this.delete()
        }


    };
    //从小球数组中检索自己，将自己删除
    Ball.prototype.delete = function () {
        for (let i=0; i<ballArr.length; i++){
            if (ballArr[i] === this){
                ballArr.splice(i,1)
            }

        }
    };

3 点下鼠标从event事件中创建小球实例

 // 鼠标点击  触发onmousemove事件  创建小球  
mycanvas.onmousedown = function(){
           mycanvas.onmousemove = function(e){
               new Ball(e.clientX,e.clientY)
           };
   //鼠标抬起 onmousemove事件取消 停止创建小球
       mycanvas.onmouseup = function(){
           mycanvas.onmousemove = null
       };

 

4 设置定时器

动画都是一帧一帧叠加起来的  所以我们的思路是 绘制每一幅动画 再快速将这些帧串接起来 就形成了动画

即FPS frame per second 所以我们必须想通每一帧到底是怎么变的 

 

鼠标按下 产生球体 然后向四周运动（随机数），同时半径慢慢减小直至消失

 

5 清楚屏幕

当一帧帧连续变化时  前一帧我们一定是看不到的   所以必须清除

当然  我在做的时候 最开始没有想到要清除屏幕 产生了意想不到的结效果 

 

 

 

 

 

注意事项

mycanvas.width = document.documentElement.clientWidth;
mycanvas.height = document.documentElement.clientHeight;

得到整个屏幕