如何使用ES6的class类继承来实现绚丽小球效果
目录
- 介绍
- 实现步骤
- 创建canvas画布环境
- 书写小球类Ball
- 实现继承球类(Ball)的MoveBall类
- 实例化小球
- index.js完整代码
- 总结
介绍
本效果采用Canvas画布绘制，再利用class类继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失。
效果图示
实现步骤
- 书写HTML
- 创建canvas画布环境
- 书写小球类Ball
- 实现继承球类(Ball)的MoveBall类
- 实例化小球
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绚丽小球</title>
<style>
#canvas{
margin-left: 100px
}
</style>
</head>
<body>
<canvas id="canvas">你的浏览器不支持canvas</canvas>
<!-- <script src="./underscore-min.js"></script> -->
<!-- underscore 中已有封装好的 _.random函数，引入就可以不用再手动写随机函数 -->
<script src="./index.js"></script>
</body>
</html>
创建canvas画布环境
// index.js
// 1、获取当前的画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布的大小样式
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'
实例解析
首先，找到 canvas 元素:
const canvas=document.getElementById("myCanvas");
然后，创建 context 对象：
const ctx = canvas.getContext('2d');
设置宽高背景色
书写小球类Ball
// index.js
// 2、小球类
class Ball {
constructor (x, y, color) {
this.x = x; // x轴
this.y = y; // y轴
this.color = color; // 小球的颜色
this.r = 40; // 小球的半径
}
// 绘制小球
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();
}
}
实例解析
- 可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。
- save() ---- 保存当前环境的状态
- beginPath() ---- 起始一条路径，或重置当前路径
- arc() ---- 用于创建弧/曲线（用于创建圆或部分圆）-- 参数如下表
| 参数 | 描述 |
|---|---|
| x | 圆的中心的 x 坐标。 |
| y | 圆的中心的 y 坐标。 |
| r | 圆的半径。 |
| sAngle | 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。 |
| eAngle | 结束角，以弧度计。 |
| counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。 |
- fillStyle() ---- 设置或返回用于填充绘画的颜色、渐变或模式。
- fill() ---- 填充当前绘图（路径）
- restore() ---- 返回之前保存过的路径状态和属性。
实现继承球类(Ball)的MoveBall类
// index.js
// 3、会移动小球的类
class MoveBall extends Ball { // 继承
constructor (x, y, color) {
super(x, y, color);
// 量的变化
// 小球的随机坐标
this.dX = Random(-5, 5);
this.dY = Random(-5, 5);
// 半径变小的随机数，因为小球是从一开始大然后慢慢的消失
this.dR = Random(1, 3);
}
// 4、改变小球的位置和半径
upDate () {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
// 判断小球的半径是否小于0
if(this.r < 0) {
this.r = 0 // 半径为0表示小球消失
}
}
}
实例解析
- 这里定义了一个MoveBall 类，该类通过extends关键字，继承了Ball类的所有属性和方法。
- super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。(详情请点击)
- upDate方法目的就是改变小球的位置和半径，根据鼠标位置的不同进行不同的变化
实例化小球
// index.js
// 5、实例化小球
// 存放产生的小球
let ballArr = [];
// 定义随机函数 如果引用了underscore-min.js 就不用写随机函数，可以直接用 _.random
let Random = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
}
// 监听鼠标的移动
canvas.addEventListener('mousemove', function (e){
// 随机颜色
// 也可以固定颜色数组 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
// bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
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();
}
}, 50);
实例解析
- 书写了一个用于产生随机颜色的Random函数
- 监听鼠标的移动创建移动的小球，然后推入存储小球的数组中，这样数组里的小球就有render和upDate方法，最后依次调用Ball类的render方法进行绘制，调用MoveBall的upDate方法。至此效果就出来啦！
- clearRect清屏操作 ---- 在给定的矩形内清除指定的像素(详情点击)。不清屏的效果看下图
我们可以看到不清屏小球半径逐渐缩小到最后小球是不会消失的，咋们肯定要的效果不是这样啦！清屏的效果是啥呢？就是文章开头的那个效果啦！(宝,玩得开心哟❤)
index.js完整代码
// 1、获取当前的画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布的大小样式
canvas.width = 1000;
canvas.height = 600;
canvas.style.backgroundColor = '#000'
// 2、小球类
class Ball {
constructor (x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.r = 40;
}
// 绘制小球
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();
}
}
// 3、会移动小球的类
class MoveBall extends Ball { // 继承
constructor (x, y, color) {
super(x, y, color);
// 量的变化
// 小球的随机坐标
this.dX = Random(-5, 5);
this.dY = Random(-5, 5);
// 半径变小的随机数
this.dR = Random(1, 3);
}
// 4、改变小球的位置和半径
upDate () {
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
// 判断小球的半径是否小于0
if(this.r < 0) {
this.r = 0
}
}
}
// 5、实例化小球
// 存放产生的小球
let ballArr = [];
// 定义随机函数 如果引用了underscore-min.js 就不用写随机函数，可以直接用 _.random
let Random = (min, max) => {
return Math.floor(Math.random() * (max - min) + min);
}
// 监听鼠标的移动
canvas.addEventListener('mousemove', function (e){
// 随机颜色
// 也可以固定颜色数组 let colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'pink'];
// bgcolor ==> colorArr[Random(0, colorArr.length - 1)]
let bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
ballArr.push(new MoveBall(e.offsetX, e.offsetY, bgColor));
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();
}
}, 50);
总结
希望这个小demo能帮大家更熟悉ES6中class类的理解与使用,到此这篇关于如何使用ES6的class类继承来实现绚丽小球效果的文章就介绍到这了,更多相关ES6 class类继承实现小球内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ES6 class类链式继承，实例化及react super(props)原理详解
本文实例讲述了ES6 class类链式继承,实例化及react super(props)原理.分享给大家供大家参考,具体如下: class定义类是es6提供的新的api,比较直观,class类继承也有着一定的规律性,在egg, webpack等库的源码中有着很多的应用场景.结合一些初学者可能遇到的难点,本文主要对其链式继承进行总结,关于super关键字的使用请参考我的其他文章es6中super关键字的理解. class定义 class App { constructor(options){ su
-
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
本文实例讲述了ES6新特性之类(Class)和继承(Extends)相关概念与用法.分享给大家供大家参考,具体如下: 一.类(Class) 1.基本语法 JavaScript语言的传统方法是通过构造函数,定义并生成新对象.下面是一个例子 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'
-
ES6 javascript中Class类继承用法实例详解
本文实例讲述了ES6 javascript中Class类继承用法.分享给大家供大家参考,具体如下: 1. 基本用法 Class 之间可以通过extends关键字实现继承, 这比 ES5 的通过修改原型链实现继承, 要清晰和方便很多. class ColorPoint extends Point {} 上面代码定义了一个ColorPoint类, 该类通过extends关键字, 继承了Point类的所有属性和方法. 但是由于没有部署任何代码, 所以这两个类完全一样, 等于复制了一个Point类. 下
-
如何使用ES6的class类继承来实现绚丽小球效果
目录 介绍 实现步骤 创建canvas画布环境 书写小球类Ball 实现继承球类(Ball)的MoveBall类 实例化小球 index.js完整代码 总结 介绍 本效果采用Canvas画布绘制,再利用class类继承实现,实现的效果鼠标在指定Canvas位置移动,会在当前鼠标的位置产生随机颜色的小球,之后小球会慢慢消失. 效果图示 实现步骤 书写HTML 创建canvas画布环境 书写小球类Ball 实现继承球类(Ball)的MoveBall类 实例化小球 HTML结构 <!DOCTYPE h
-
老生常谈ES6中的类
前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类的概念,最相近的思路是创建一个自定义类型:首先创建一个构造函数,然后定义另一个方法并赋值给构造函数的原型 function PersonType(name) { this.name = name; } Person
-
ES6中class类用法实例浅析
本文实例讲述了ES6中class类用法.分享给大家供大家参考,具体如下: 类语法是ES6中新增的一个亮点特色.我们熟悉的JavaScript终于迎来了真正意义上的类.在之前,想要通过javascript来实现类,通常会采用如下构造函数的模式: function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ['Shelby','Court']; } Person.pro
-
ES6中Class类的静态方法实例小结
本文实例讲述了ES6中Class类的静态方法.分享给大家供大家参考,具体如下: 以前看过的es6的东西,又忘了,再总结下: 类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为"静态方法" class Foo { static classMethod() { return 'hello'; } } Foo.classMethod() // 'hello' var foo = new
-
ES6中定义类和对象的方法示例
本文实例讲述了ES6中定义类和对象的方法.分享给大家供大家参考,具体如下: 类的基本定义和生成实例: // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = ne
-
es6中class类静态方法，静态属性，实例属性，实例方法的理解与应用分析
本文实例讲述了es6中class类静态方法,静态属性,实例属性,实例方法.分享给大家供大家参考,具体如下: es6新增了一种定义对象实例的方法,使用class关键字定义类,与class相关的知识点也逐步火热起来,但是部分理解起来相对抽象,简单对class相关的知识点进行总结,更好的使用class.对于基本概念,请参见阮一峰老师的es6入门教程.本文主要总结class静态相关. 关于类有两个概念,1,类自身,:2,类的实例对象 总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是
-
JS面向对象编程——ES6 中class的继承用法详解
本文实例讲述了 ES6 中class的继承用法.分享给大家供大家参考,具体如下: JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异.ES6引入了Class语法糖,使得JS的继承更像面向对象语言的写法. 此篇博客,分为:基本介绍.Vue使用案例 基本介绍 Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多: class Father { } class Son extends Father { } 代码定义了一个Son 类
-
JS高级ES6的6种继承方式
目录 1.原型链继承 2.借助构造函数继承 3.组合式继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 前言: 继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,ES6新增的extends关键字也是通过原型链实现的继承,但是语法相对来说就简单了很多. 关于原型链的内容,可以参考上篇文章两张图搞懂原型链 本篇文章就来介绍一下在ECMAScript6之前是怎么实现继承的. 1
-
javascript中的类,继承,构造函数详解
目录 前言 一.Class类 二.es5构造函数 三.实例.类的关系 实例的原型指向类的原型 Constructor 四.继承 es6继承 es5继承的实现 总结 前言 在es5中实现一个构造函数,并用new调用,即可得到一个类的实例.到了es6发布了Class的写法,js的面向对象变成也变得比较规范了.聊到类就不能不说类的构造函数以及类如何继承 一.Class类 定义一个类: class A { constructor(name){ this.name = name } getName(){