扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >如何使用ES6的class类继承实现绚丽小球效果
  • 836

0
分享到

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

2023-06-17 09:06:56 836人浏览 薄情痞子
摘要

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

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

介绍

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

效果图示

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

实现步骤

  • 书写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 就不用写随机函数，可以直接用  _.randomlet 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清屏操作 ---- 在给定的矩形内清除指定的像素(详情点击)。不清屏的效果看下图

如何使用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 就不用写随机函数，可以直接用  _.randomlet 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类继承实现绚丽小球效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。

--结束END--

本文标题: 如何使用ES6的class类继承实现绚丽小球效果

本文链接: https://lsjlt.com/news/288090.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何使用ES6的class类继承实现绚丽小球效果
    今天小编给大家分享一下如何使用ES6的class类继承实现绚丽小球效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。介绍本效...
    99+
    2023-06-17
  • 如何使用ES6的class类继承来实现绚丽小球效果
    目录介绍实现步骤创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类实例化小球index.js完整代码总结介绍 本效果采用Canvas画布绘制，再...
    99+
    2024-04-02
  • CSS3如何实现绚丽的动画效果
    这篇文章主要讲解了“CSS3如何实现绚丽的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现绚丽的动画效果”吧！ 举例： 1...
    99+
    2024-04-02
  • 如何使用Matlab绘制超绚丽的烟花效果
    这篇文章将为大家详细讲解有关如何使用Matlab绘制超绚丽的烟花效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.使用效果2.随机点生成我们要构造一个黑色背景，对其添加高斯噪声，然后依据阈值删掉部分噪...
    99+
    2023-06-29
  • ES6与canvas如何实现鼠标小球跟随效果
    这篇文章将为大家详细讲解有关ES6与canvas如何实现鼠标小球跟随效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。首先，html部分，目前就一个canvas标签。 <canvas&nb...
    99+
    2023-06-08
  • 如何使用HTML5实现炫丽的流星雨效果
    这期内容当中小编将会给大家带来有关如何使用HTML5实现炫丽的流星雨效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。 徐家破镜昏如雾。半面...
    99+
    2024-04-02
  • 如何使用jquery实现页面弹球效果
    这篇文章主要为大家展示了“如何使用jquery实现页面弹球效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jquery实现页面弹球效果”这篇文章吧。具体内容如下像windows屏保一样...
    99+
    2023-06-26
  • CSS如何实现小球抛物线运动的动画效果
    这篇文章将为大家详细讲解有关CSS如何实现小球抛物线运动的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　一个物体实现抛物线运动，物理上是将物体分为水平运动...
    99+
    2024-04-02
  • 如何使用纯CSS实现两个球相交的粘粘效果
    这篇文章将为大家详细讲解有关如何使用纯CSS实现两个球相交的粘粘效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　这是一个纯粹利用CSS所做出来的效果，这个效果说...
    99+
    2024-04-02
  • PHP扩展开发：如何使用抽象类实现自定义函数的继承？
    在 php 扩展中，使用抽象类实现自定义函数继承的方法如下：定义抽象类，指定函数签名和文档；创建子类实现具体函数；在扩展模块注册自定义函数；创建子类支持不同的转换；注册自定义函数供 ph...
    99+
    2024-05-15
    php 抽象类
  • 如何使用纯CSS实现类似悬浮窗口的效果
    悬浮窗口是在网页设计中经常使用的一种效果，它可以提供快速访问功能或者展示重要的信息。本文将介绍如何使用纯CSS来实现类似悬浮窗口的效果，包括具体的代码示例。首先，我们需要在HTML中创建一个容器元素，用于承载悬浮窗口的内容。可以是一个div...
    99+
    2023-10-21
    实现 纯CSS 悬浮窗口
  • 如何使用CSS3实现的科技球体旋转动画特效
    这篇文章主要为大家展示了“如何使用CSS3实现的科技球体旋转动画特效”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现的科技球体旋转动画特效”这...
    99+
    2024-04-02
  • 如何使用javascript实现鼠标框的效果
    鼠标框是一种常见的交互效果，在网页设计和开发中得到广泛应用。使用 javascript 实现鼠标框不仅可以增强用户体验，还可以为网页添加更多的交互效果。在本文中，我们将介绍如何使用 javascript 实现鼠标框的效果，向大家详细地介绍实...
    99+
    2023-05-14
  • 如何使用CSS实现发光的按钮效果
    这篇“如何使用CSS实现发光的按钮效果”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何使用CSS实现发光的按钮效果”，小编整理了以下知识点，请大家跟着小编的...
    99+
    2024-04-02
  • 如何使用CSS实现简单的滤镜效果
    这篇文章主要介绍“如何使用CSS实现简单的滤镜效果”，在日常操作中，相信很多人在如何使用CSS实现简单的滤镜效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用CSS实...
    99+
    2024-04-02
  • 如何使用css实现图片的滑动效果
    小编给大家分享一下如何使用css实现图片的滑动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　<!DOCTYPE...
    99+
    2024-04-02
  • 如何使用纯CSS3的transform实现心动效果
    这篇文章主要介绍如何使用纯CSS3的transform实现心动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！心动送一个爱心表示我对你心动,使用纯 CSS3 的transform实现：css 部分html,body...
    99+
    2023-06-27
  • 如何使用 CSS 实现各种常见的效果
    CSS 是一种用于设计网页样式和布局的技术。在这篇文章中，我们将探讨如何使用 CSS 实现各种常见的效果。一、实现圆形图片在网页设计中，经常需要使用圆形图片来进行美化。实现圆形图片通常有两种方式：一种是使用一个正方形图片并将其裁剪成圆形，另...
    99+
    2023-05-14
  • 如何使用CSS实现图片的缩放效果
    如何使用CSS实现图片的缩放效果在网页设计中，图片的缩放效果是常见的需求之一。通过CSS的相关属性和技巧，我们可以轻松地实现图片的缩放效果。下面，将为大家详细介绍如何使用CSS来实现图片的缩放效果，并给出具体的代码示例。使用transfor...
    99+
    2023-11-21
    图片缩放 CSS缩放 CSS图片效果
  • 如何使用CSS实现图片的旋转效果
    如何使用CSS实现图片的旋转效果CSS（Cascading Style Sheets）是一种用于设置网页样式和布局的标记语言。通过CSS，我们可以实现许多吸引人的网页效果，其中包括图片的旋转效果。在本文中，我们将讨论如何使用CSS来实现图片...
    99+
    2023-11-21
    CSS 图片 旋转
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作