这里实现了一个炫彩小球的小demo
直接来看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>炫彩小球</title>
<style>
*{
padding: 0;
margin: 0;
}
canvas{
border: 1px blueviolet solid;
}
body{
/* background-color: black; */
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
var mycanvas = document.querySelector('canvas');
var ctx=mycanvas.getContext('2d')
//设置画布满屏
mycanvas.width=document.documentElement.clientWidth;
mycanvas.height=document.documentElement.clientHeight;
function ColourfulBall(x,y){
this.x=x, //圆心x
this.y=y, //圆心y
this.r=30, //圆的半径(暂时固定)
this.color="rgb(" + parseInt(Math.random()*256) + "," +parseInt(Math.random()*256)+ "," +parseInt(Math.random()*256)+ "," +parseInt(Math.random()*256)//随机生成颜色
this.dx=Math.random() * 9 - 3;//随机生成x轴偏移量
this.dy=Math.random() * 9 - 3;//随机生成y轴偏移量
ballArr.push(this)//放进ballArr数组里边
}
ColourfulBall.prototype.updata=function(){
this.x+=this.dx
this.y+=this.dy
this.r--; //半径从圆心开始变小
if(this.r<0){ //如果半径小于0时就,就从数组中抛出它
this.die();
}
}
ColourfulBall.prototype.die=function(){
for(var i=0;i<ballArr.length;i++){
if(ballArr[i]===this){
ballArr.splice(i,1)
}
}
}
ColourfulBall.prototype.render=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true)
ctx.closePath();
ctx.fillStyle=this.color;
ctx.fill();
}
var ballArr=[] //设置一个数组保存小球
mycanvas.onmousemove=function(event){ //监听鼠标移动
new ColourfulBall(event.clientX,event.clientY)
}
setInterval(()=>{
ctx.clearRect(0,0,mycanvas.width,mycanvas.height);//清空画布
for(var i =0;i<ballArr.length;i++){
ballArr[i].updata();
ballArr[i] && ballArr[i].render();
}
},10)
</script>
</body>
</html>
更多API学习点这里
复制到编辑器上就能够看到效果!希望能帮到大家(比心)