这篇文章主要介绍“如何使用ES6的class类继承来实现绚丽小球效果”，在日常操作中，相信很多人在如何使用ES6的class类继承来实现绚丽小球效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用ES6的class类继承来实现绚丽小球效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！本效果采用Canvas画布绘制，再利用class类继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失。效果图示书写HTML创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类
实例化小球HTML结构实例解析首先，找到 canvas 元素:然后，创建 context 对象：设置宽高背景色实例解析可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。save() —- 保存当前环 香港云主机境的状态beginPath() —- 起始一条路径，或重置当前路径arc() —- 用于创建弧/曲线（用于创建圆或部分圆）– 参数如下表fillStyle() —- 设置或返回用于填充绘画的颜色、渐变或模式。fill() —- 填充当前绘图（路径）restore() —- 返回之前保存过的路径状态和属性。实例解析这里定义了一个MoveBall 类，该类通过extends关键字，继承了Ball类的所有属性和方法。super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。(详情请点击)upDate方法目的就是改变小球的位置和半径，根据鼠标位置的不同进行不同的变化实例解析书写了一个用于产生随机颜色的Random函数监听鼠标的移动创建移动的小球，然后推入存储小球的数组中，这样数组里的小球就有render和upDate方法，最后依次调用Ball类的render方法进行绘制，调用MoveBall的upDate方法。至此效果就出来啦！clearRect清屏操作 —- 在给定的矩形内清除指定的像素(详情点击)。不清屏的效果看下图我们可以看到不清屏小球半径逐渐缩小到最后小球是不会消失的，咋们肯定要的效果不是这样啦！清屏的效果是啥呢？就是文章开头的那个效果啦！(宝,玩得开心哟❤)到此，关于“如何使用ES6的class类继承来实现绚丽小球效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注开发云网站，小编会继续努力为大家带来更多实用的文章！
这篇文章主要介绍“怎么用Docker挂载本地目录及实现文件共享”，在日常操作中，相信很多人在怎么用Doc 香港云主机ker挂载本地目录及实现文件共享问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用Docker挂载本地目录及实…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
