canvas交互部分

mousemove

let mouse = {
    x: undefined,
    y: undefined,
}

// 鼠标监听事件，获取鼠标移动的相应坐标
window.addEventListener('mousemove',function(event){
    mouse.x=event.x;
    mouse.y=event.y;
    console.log(mouse);
});

/* 创建画布 */
let canvas = document.querySelector('#canvas');
//宽高自适应
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 获取2d画布
let ctx = canvas.getContext('2d');

//圆的数组
let circleArray = [];
// 填充颜色
let colorArray = [
    '#ffffcc',
    '#ccffff',
    '#ffcccc',
    '#99cccc',
    '#cc9999',
    '#ffffcc',
    '#cccc99',
    '#ffff99',
    '#ccccff',
];
// 封装圆的制造过程
function init(){
    //循环制造不同的圆，存进数组
    for(let i=0;i<400;i++){
        let x = Math.random()*innerWidth;// 横坐标
        let y = Math.random()*innerHeight;// 纵坐标
        let r = Math.random()*3+1; // 半径
        let dx = Math.random()*1; // 横向平移距离
        let dy = Math.random()*1; // 纵向平移距离
        circleArray.push(new Circle(x,y,r,dx,dy));
    }
}

// 创建一个Circle对象
function Circle(x,y,r,dx,dy) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.dx = dx;
    this.dy = dy;
    this.minR =r;
    this.bg = colorArray[Math.floor(Math.random()*colorArray.length)];

    // 绘制圆
    this.draw = function() {
        /* 绘制样式 */
        ctx.fillStyle = this.bg; // 填充属性
        ctx.strokeStyle = 'black'; // 描边属性
        ctx.lineWidth = 1; // 线条属性

        ctx.beginPath();
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false);
        ctx.fill();
    }
    // 更新圆的位置
    this.update = function() {
        // 改变圆的位子
        this.x+=this.dx;
        this.y+=this.dy;    
        // 当触及边界时
        if(this.x+this.r>innerWidth || this.x-this.r<0) {
            this.dx=-this.dx;
        }
        if(this.y+this.r>innerHeight || this.y-this.r<0) {
            this.dy=-this.dy;
        }

        // 借助鼠标监听事件，鼠标坐标与圆50px以内时，圆会增大，否则减小
        if((mouse.x-this.x<50)&&(mouse.x-this.x>-50)&&(mouse.y-this.y<50)&&(mouse.y-this.y>-50)){
            // 防止圆无限增大
            if(this.r<40){
                this.r+=1;                
            }
        } else {
            //防止出现负数
            if(this.r>this.minR){
                this.r-=1;
            }
        }

        // 每一次更新都要重新在一个新的地方绘制圆
        this.draw();
    }
}

// 制造圆
init();
// 这个函数会在控制台无限输出"canvas"
function animate() {
    requestAnimationFrame(animate);
    // 橡皮擦函数 clearRect(x坐标,y坐标,宽度,高度)
    ctx.clearRect(0,0,innerWidth,innerHeight);
    // 循环刷新每个圆
    for(let i=0;i<circleArray.length;i++){
        circleArray[i].update();
    }
}
animate();