行业资讯

如何使用ES6的class类继承实现绚丽小球效果

发布时间：2022-03-31 16:26:37 作者：iii
来源：亿速云 阅读：169

今天小编给大家分享一下如何使用ES6的class类继承实现绚丽小球效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

介绍

本效果采用Canvas画布绘制，再利用class类继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失。

效果图示

如何使用ES6的class类继承实现绚丽小球效果

实现步骤

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();
     }
 }

实例解析

参数描述
x圆的中心的 x 坐标。
y圆的中心的 y 坐标。
r圆的半径。
sAngle起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle结束角，以弧度计。
counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

实现继承球类(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表示小球消失 
        }
    }
}

实例解析

实例化小球

// 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);

实例解析

如何使用ES6的class类继承实现绚丽小球效果

我们可以看到不清屏小球半径逐渐缩小到最后小球是不会消失的，咋们肯定要的效果不是这样啦！清屏的效果是啥呢？就是文章开头的那个效果啦！

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);

以上就是“如何使用ES6的class类继承实现绚丽小球效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。

推荐阅读：
  1. canvas如何实现动态小球重叠的效果
  2. 如何使用python实现小球弹跳效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

es6 class

上一篇：微信小程序中es6-promise.js封装请求与处理异步进程的方法

下一篇：es6箭头函数和普通函数的区别有哪些

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号