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

最新推荐文章于 2023-06-08 15:50:16 发布

原创

最新推荐文章于 2023-06-08 15:50:16 发布 · 422 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #canvas

本文档介绍了一个基于Canvas和ES6 Class的编程练习，旨在实现鼠标移动时画布上生成并运动的彩色小球效果。通过初始化参数、设计小球类、实现小球动态变化以及在画布上绘制，最后通过定时器更新小球状态。项目还包含了扩展功能，如画布背景切换和控制小球运动状态。

                    
                        
                    
                    一、项目说明及效果 
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">&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 = []; 
 
 
设计静态小球
 
首先我们应该在画布上绘制出静态的小球，即设计Ball类，分析可知，要初始化小球，必须指定4个属性：x坐标、y坐标、color(小球颜色)、radius(小球半径)，这一部分可以在constructor构造函数中初始化，同时Ball还需要有render方法来绘制小球// 小球类
class 

                