看到一个类似于烟花爆炸类的canvas，谈不上多复杂。
源码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{margin:0;padding:0;list-style: none;border:0;}
body{background: #000;}
#canvas{margin:0 auto;border:1px solid #ccc;display: block;}
a{
width:100px;height:35px;
line-height: 35px;background: #abcdef;
color: #fff;text-align: center;
display: inline-block;text-decoration: none;
border-radius: 10px;
}
.btn{width: 215px;margin:20px auto;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="btn">
<a href="#" id="beginMove">开始运动</a>
<a href="#" id="stopMove">停止运动</a>
</div>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=600;
var height=600;
canvas.width=width;
canvas.height=height;
var circularArr=[];
var beginMove=document.getElementById("beginMove");
var stopMove=document.getElementById("stopMove");
var colorArr=["#ff0000","#ff00d2","#7200ff","#1200ff","#00eaff","#00ff18","#c0ff00","#ffb400","#ff4e00","#0d6e00"];
function rnd(min, max) {
return ((Math.random() * (max - min)) + min);
}
function circularInit(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font="5px Courier New";
ctx.fillStyle="#ccc";
ctx.fillText("如有问题关注微信公众号：smallBj520与我联系",canvas.width-270,canvas.height-10);
for(var i=0;i<100;i++){
var circular={
x:canvas.width/2,
y:canvas.height/2,
r:Math.random()*6+2,
vx: rnd((-1) * 10, 10),
vy: rnd((-1) * 10, 10),
//color:colorArr[Math.floor(Math.random()*colors.length)]
};
circularArr.push(circular);
circularArr[i].x+=circularArr[i].vx,
circularArr[i].y+=circularArr[i].vy;
if(circularArr[i].x<=0 || circularArr[i].x>=canvas.width){
circularArr[i].x=canvas.width/2;
circularArr[i].y=canvas.height/2;
}
if(circularArr[i].y<=0 || circularArr[i].y>=canvas.height){
circularArr[i].x=canvas.width/2;
circularArr[i].y=canvas.height/2;
}
ctx.fillStyle=colorArr[Math.floor(Math.random()*colorArr.length)];
ctx.beginPath();
ctx.arc(circularArr[i].x,circularArr[i].y,circularArr[i].r,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
}
}
var timer=setInterval(function(){
circularInit();
},80)
beginMove.onclick=function(){
console.log(timer);
if(timer<1){
timer=setInterval(function(){
circularInit();
},80)
}
}
stopMove.onclick=function(){
clearInterval(timer);
timer="";
}
</script>
</body>
</html>
其中需要注意一下几点：
1、四面八方坐标的生成：利用rnd（）函数得到一个-10~10之间的随机数值，得到坐标值；
2、通过for循环，一次性画100个随机的圆点；
3、通过定时器，循环画canvas；
时间： 2024-12-31 10:23:55