炫彩小球：基于Canvas和ES6中的Class类知识点的练习

一、项目说明及效果

• github地址
• 一次基于Canvas和ES6中的Class类知识点的练习
• 实现效果：在画布上，随着鼠标移动，会产生一组绚丽的运动小球
• 效果截图：
  

二、实现思路

1. 初始化canvas、设置初始参数

• HTML结构

  <div id="canvas-wrapper">
  	<canvas id="canvas">
  		当前浏览器不支持canvas,请更换后重新尝试
  	</canvas>
  	<!--左上方控件-->
  	<div id="controller">
  		<h1>Canvas-炫彩小球</h1>
  		<a id="canvas-btn">停止运动</a>
  		<a class="color-btn" id="white-color-btn">&nbsp;</a>
  		<a class="color-btn" id="black-color-btn">&nbsp;</a>
  	</div>
  </div>
  

• 初始化canvas

  // 1. 获取当前画布
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = 1000;
  canvas.height = 600;
  
  // 2. 保存生成的小球
  let ballArr = []; 
  

2. 设计静态小球

• 首先我们应该在画布上绘制出静态的小球，即设计Ball类，分析可知，要初始化小球，必须指定4个属性：x坐标、y坐标、color(小球颜色)、radius(小球半径)，这一部分可以在constructor构造函数中初始化，同时Ball还需要有render方法来绘制小球