类的继承——cancas绘制五彩小球

html代码：

<body><canvas id="canvas"></canvas>
</body>

css代码：

<style>body{margin: 100px;}#cavans{box-shadow: 0 0 10px #000;}</style>

js代码：

<script>// 1.处理画布const canvas=document.getElementById("canvas")const ctx=canvas.getContext('2d')canvas.width=800canvas.height=400canvas.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.colorctx.fill()ctx.restore()}}class MoveBall extends  Ball{constructor(x,y,color){super(x,y,color)this.dX=Math.random()*(5-(-5))+(-5)this.dY=Math.random()*(5-(-5))+(-5)this.dR=Math.random()*(3-1)+(1)}update(){this.x+=this.dXthis.y+=this.dYthis.r-=this.dRif(this.r<0){this.r=0}}}// 3.实例化小球let ballArr=[]let colorArr=['red','green','blue','yellow','purple','pink','orange']// 4.监听鼠标移动canvas.addEventListener('mousemove',(e)=>{let moveBall=new MoveBall(e.offsetX,e.offsetY,colorArr[parseInt(Math.random()*(colorArr.length-1))])ballArr.push(moveBall)})// 5.开启定时器绘制setInterval(()=>{// 清屏ctx.clearRect(0,0,canvas.width,canvas.height)// 绘制for(let i=0,len=ballArr.length;i<len;i++){ballArr[i].render()ballArr[i].update()}},50)
</script>

效果图：

类的继承——cancas绘制五彩小球相关推荐

java类接口实验_实验3_Java类的继承和接口的定义和使用
本次有三题:学会Java类的继承.接口的定义和使用 // Ex3_1.java /** * 题目要求: * 修改例5.7(P95)实现在页面中拖动鼠标画出矩形,矩形的对角线为点击并拖动鼠标形成的直线线 ...
C++：随笔5---this指针和类的继承
this指针:(通过一个典型的例子来认识他) class Human {char fishc;Human(char fishc);//构造函数}; Human::Human(char fishc)// ...
【廖雪峰python进阶笔记】类的继承
1. 继承如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object):def __init__(self, ...
LotusScript类的继承
最近在修改产品时,时常遇到需要修改一个自定义类的方法,但是这个类又不能给整个(代码保密),这时如何调试就变得很麻烦了.下面通过类的继承就可以很方便的解决这个问题了. Option PublicClas ...
python 类的继承，类中的函数调用以及类输入数组
第一部分,类的继承先给出一个例子: class People(): #定义类,要大写,python 2中要在括号里加如object这个单词def __init__(self,n,a,w): #定义一 ...
python 笔记之类的继承与重写
2019独角兽企业重金招聘Python工程师标准>>> ''' 6.继承 super 重写调用:先找子类中的方法,如果子类中找不到就到父类中找多继承:如果父类中都有该方法,那么先 ...
python中的继承有什么特点_python类的继承是什么？类的继承有什么样的规则？
在这篇文章之中我们来了解一下python类的继承,对于刚刚接触到python这一编程语言的朋友来说,对于python类的继承的了解应该比较少,不过没关系,在接下来的文章之中我们就来了解一下python ...
C++知识点44——类的继承概述
类的继承,是新类从已有类那里得到已有的特性,或从已有类产生新类的过程.原有类称为基类或父类,新类称为派生类或子类. 子类通过类派生列表确定子类继承了哪些类.类派生列表的形式如下 class 子类名:访 ...
python3 入门 (四) 类与继承
Python 类 Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法中可以调用基类中的同名方法. 对象可以包含任意数量和类型的数据. p ...
java第四节类的继承/抽象/接口/多态性
/* 类的继承类的继承可以简化类的定义 java只支持单继承,不允许多重继承可以有多层继承,即一个类可以继承其一个类的子类,如类B继承了类A,类C又可以继承类B 那么类C也间接继承了类A子类继承父 ...

类的继承——cancas绘制五彩小球

类的继承——cancas绘制五彩小球相关推荐

最新文章

热门文章