Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you how to use ES6's class class inheritance to achieve gorgeous ball effect related knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Introduction

This effect is drawn by Canvas canvas, and then realized by class class inheritance. If the mouse moves in the specified Canvas position, the random color ball will be produced in the current mouse position, and then the ball will disappear slowly.

Effect diagram

Implementation steps

Write HTML

Create a canvas canvas environment

Write small ball Ball

Implement the MoveBall class that inherits ball (Ball)

Instantiate the ball

HTML structure

Gorgeous ball # canvas {margin-left: 100px} your browser does not support canvas to create a canvas canvas environment

/ / index.js / / 1. Get the current canvas const canvas = document.getElementById ('canvas'); const ctx = canvas.getContext (' 2d'); / / set the size style of the canvas canvas.width = 1000; canvas.height = 600; canvas.style.backgroundColor ='# 000'

Case analysis

First, find the canvas element:

Const canvas=document.getElementById ("myCanvas")

Then, create the context object:

Const ctx = canvas.getContext ('2d')

Set the wide and high background color

Write small ball Ball

/ / index.js / / 2, class Ball {constructor (x, y, color) {this.x = x; / / x axis this.y = y; / / y axis this.color = color; / / Color this.r = 40; / / Radius of the ball} / / draw the ball 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 ();}}

Case analysis

You can see that there is a constructor () method inside, which is the constructor, and the this keyword represents the instance object.

Save ()-saves the state of the current environment

BeginPath ()-start a path or reset the current path

Arc ()-used to create arcs / curves (for creating circles or partial circles)-parameters are as follows

Parameter describes the x coordinates of the center of the x circle. The y coordinate of the center of the y circle. The radius of the r circle. The starting angle of sAngle, measured in radians (the 03:00 position of the circle of the arc is 0 degrees). EAngle end angle, in radians. Counterclockwise is optional. It is stipulated that the drawing should be counterclockwise or clockwise. False = clockwise, true = counterclockwise.

FillStyle ()-sets or returns the color, gradient, or mode used to fill the painting.

Fill ()-fill the current drawing (path)

Restore ()-returns the previously saved path state and properties.

Implement the MoveBall class that inherits ball (Ball)

/ / index.js// 3, class MoveBall extends Ball {/ / inherits constructor (x, y, color) {super (x, y, color) {super (x, y, color); / / changes in quantity / / Random coordinates of the ball this.dX = Random (- 5,5); this.dY = Random (- 5,5) / / A random number with a smaller radius, because the ball is large at the beginning and then slowly disappears this.dR = Random (1,3);} / / 4, change the position and radius of the ball upDate () {this.x + = this.dX; this.y + = this.dY; this.r-= this.dR / / determine whether the radius of the ball is less than 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);} / / monitor the mobile canvas.addEventListener of the mouse ('mousemove', function (e) {/ / random color / / you can also fix the color array let colorArr = [' red', 'green',' blue', 'yellow',' orange', 'pink'] / / bgcolor = = > colorArr [Random (0, colorArr.length-1)] let bgColor = `rgb (${Random (0256)}, ${Random (0256)}, ${Random (0256)}) `; ballArr.push (new MoveBall (e.offsetX, e.offsetY, bgColor)); console.log (ballArr);}) / / start timer setInterval (function () {/ / clear screen ctx.clearRect (0,0, canvas.width, canvas.height)) / / draw the ball 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 就不用写随机函数，可以直接用 _.randomlet Random = (min, max) =>

{return Math.floor (Math.random () * (max-min) + min);} / / monitor the mobile canvas.addEventListener of the mouse ('mousemove', function (e) {/ / random color / / you can also fix the color array let colorArr = [' red', 'green',' blue', 'yellow',' orange', 'pink'] / / bgcolor = = > colorArr [Random (0, colorArr.length-1)] let bgColor = `rgb (${Random (0256)}, ${Random (0256)}, ${Random (0256)}) `; ballArr.push (new MoveBall (e.offsetX, e.offsetY, bgColor)); console.log (ballArr);}) / / start timer setInterval (function () {/ / clear screen ctx.clearRect (0,0, canvas.width, canvas.height)) / / draw the ball for (let I = 0; I < ballArr.length; iBall +) {ballArr [I] .render (); BallArr [I] .upDate ();}}, 50). That's all of the article "how to use ES6's class class inheritance to achieve gorgeous ball effects". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.