这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

效果演示

鼠标点击划过屏幕会有彩色小球向四周散射canvas实现球体彩带

主体思路

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;

得到整个屏幕

canvas实现球体彩带