canvans鼠标小球

canvas鼠标小球

熟悉es6特性练习，使用canvas绘制鼠标移动小球特效

实现过程

1.首先先定义一个canvas,设定canvas的样式和大小

  <style>
    #canvas {
      margin: 20px auto;
      background: #000;
      display: block;
    }
  </style>
<canvas id="canvas">当前浏览器不支持此版本</canvas>

2.获取画板

  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 800;
  canvas.height = 450;
  canvas.backgoundColor = '#999';

3.设置想要绘制小球的原型及相关方法

class Ball {
    constructor(x, y, color) {
      this.x = x;
      this.y = y;
      this.color = color;
      this.r = 30;
    }

    // 绘制
     
    render() {
      ctx.save();
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.restore();
    }
  }

4.使用原型继承的方式创建可移动小球

//会移动的小球
  class MoveBall extends Ball {
    constructor(x, y, color) {
      super(x, y, color);
      //小球变化
      this.dX = Math.random(-10, 10);
      this.dY = Math.random(-10, 10);
      this.dR = Math.random(3, 5);
    }
    //更新
    upDate() {
      this.x += this.dX;
      this.y += this.dY
      //this.r -= this.dR;
      //if(this.r<0){
      //  this.r=0;
      //}
      //使用三目运算优化
      this.r=(this.r -this.dR<0)?0:this.r -this.dR;
    }
  }

5.通过事件监听获取小球的坐标，通过随机数获取颜色开始绘制小球

let ballArr=[];
  let colorArr =['red','yellow','blue','pink','green','orange'];
//鼠标移动
  canvas.addEventListener('mousemove',function(e){
    //let e=e ||event;
    ballArr.push(new MoveBall(e.offsetX, e.offsetY,colorArr[ Math.round(Math.random()*(colorArr.length-1))]));
    //console.log(ballArr);
  })
//定时绘制
  setInterval(function(){
    //清屏
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for(let i= 0;i<ballArr.length;i++){
      ballArr[i].render();
      ballArr[i].upDate();
    }
  },30);