一、项目说明及效果
- github地址
- 一次基于Canvas和ES6中的Class类知识点的练习
- 实现效果:在画布上,随着鼠标移动,会产生一组绚丽的运动小球
- 效果截图:
二、实现思路
- 初始化
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"> </a> <a class="color-btn" id="black-color-btn"> </a> </div> </div>
- 初始化
canvas
// 1. 获取当前画布 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 1000; canvas.height = 600; // 2. 保存生成的小球 let ballArr = [];
- 设计静态小球
- 首先我们应该在画布上绘制出静态的小球,即设计
Ball
类,分析可知,要初始化小球,必须指定4个属性:x坐标
、y坐标
、color(小球颜色)
、radius(小球半径)
,这一部分可以在constructor
构造函数中初始化,同时Ball
还需要有render
方法来绘制小球//