canvas画布小球动画
style样式
#canvas{
box-shadow:0 0 10px #000;
}
body布局
<canvas id="canvas" width="" height="">
<span id='sp'>
请升级浏览器 以显示内容
</canvas>
script代码
//生成一个随机数
let newMath = (x,y) => {
let num=y-x
return Math.floor(Math.random()*num+x)
}
//1.生成一个随即色值
let randomRgbColor = () => {
//获取256以内的随机数
let r=Math.floor(Math.random()*256)
let g=Math.floor(Math.random()*256)
let b=Math.floor(Math.random()*256)
return `rgba(${r},${g},${b},.5)`
}
//2.获取画布
const canvas = document.getElementById('canvas')
//获取画布的上下文
const ctx = canvas.getContext('2d')
canvas.width ='1000'
canvas.height ='600'
canvas.style.background ="#000"
//3.创建小球的类
class Ball{
//constructor()是每个类里必须要有的方法，如果没写，也会有一个默认的出现
//这个方法是类的构造函数，一些属性的存放在这里
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()
}
}
//4.让小球移动起来
//让MoveBall 继承Ball
//extends :继承的关键字
class MoveBallextends Ball{
constructor(x,y,color){
//super关键字，在继承中必须使用的关键字
//用来代表父类的构造方法
super(x,y,color)
this.dx =newMath(-5,5)
this.dy =newMath(-5,5)
this.dr =newMath(1,3)
}
//更新数据
update(){
//this.x:当前的位置
//this.dx:每次移动的距离
this.x +=this.dx
this.y +=this.dy
this.r -=this.dr
if(this.r<0){
this.r=0
}
}
}
//5.储存变化的小球
let barArr = []
//6.监听鼠标的移动事件
canvas.addEventListener("mousemove",function(ev){
var ev = ev || window.ev
// x y color
barArr.push(new MoveBall(ev.offsetX,ev.offsetY,randomRgbColor()))
})
//7.开始定时器，绘制动画
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
for(let i =0 ; i
barArr[i].render()
console.log(barArr[i])
barArr[i].update()
}
},50)
