效果图1
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: pink;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: white;
}
</style>
</head>
<body>
<canvas width="400" height="400"></canvas>
<script>
var oC = document.querySelector("canvas");
if(oC.getContext){
var ctx = oC.getContext("2d");
var arr = [];
//将数组中的圆绘制到画布上
setInterval(function(){
ctx.clearRect(0,0,oC.width,oC.height);
for(i=0;i<arr.length;i++){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
ctx.fill();
ctx.restore();
if(arr[i].alp<=0){
arr.splice(i,1);
}
arr[i].r++;
arr[i].alp -=0.01;
}
},1000/60)
//往arr中注入随机圆的信息
setInterval(function(){
var x = Math.random()*oC.width;
var y = Math.random()*oC.height;
var r = 10;
var red = Math.round(Math.random()*255);
var blue = Math.round(Math.random()*255);
var yellow = Math.round(Math.random()*255);
var alp = 1;
arr.push({
x:x,
y:y,
r:r,
red:red,
blue:blue,
yellow:yellow,
alp:alp,
})
},100)
}
</script>
</body>
</html>效果图2
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
background-color: pink;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: white;
}
</style>
</head>
<body>
<canvas width="150" height="400"></canvas>
<script>
var oC = document.querySelector("canvas");
if(oC.getContext){
var ctx = oC.getContext("2d");
var arr = [];
//将数组中的圆绘制到画布上
setInterval(function(){
ctx.clearRect(0,0,oC.width,oC.height);
for(i=0;i<arr.length;i++){
ctx.save();
ctx.beginPath();
ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].blue+","+arr[i].yellow+","+arr[i].alp+")";
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
ctx.fill();
ctx.restore();
arr[i].deg +=6;
arr[i].x = arr[i].startX + Math.sin(arr[i].deg*Math.PI/180)*arr[i].step*2;
arr[i].y = arr[i].startY - (arr[i].deg*Math.PI/180)*arr[i].step;
if(arr[i].Y<=50){
arr.splice(i,1);
}
}
},1000/60)
//往arr中注入随机圆的信息
setInterval(function(){
var x = Math.random()*oC.width;
var r = Math.random()*6+2;
var y = oC.height-r;
var startX = x;
var startY = y;
var red = Math.round(Math.random()*255);
var blue = Math.round(Math.random()*255);
var yellow = Math.round(Math.random()*255);
var step = Math.random()*20+10;
var alp = 1;
var deg = 0;
arr.push({
x:x,
y:y,
r:r,
red:red,
blue:blue,
yellow:yellow,
alp:alp,
step:step,
startX:startX,
startY:startY,
deg:deg
})
},100)
}
</script>
</body>
</html>用到的知识点：
h5中canvas相关的知识点：
save（） canvas2D API通过将当前状态放入栈中，保存canvas全部状态的方法，调用sava时，将样式容器里的状态压入样式表。
restore（） 调用restore时，将样式栈的栈顶状态弹出到样式容器里进行覆盖。
clearRect（x，y，width，height） 清楚指定矩形区域，让清除部分完全透明。
x与y指定了画布上所绘制的矩形的左上角（相对于原点）的坐标。
fillStyle 设置图形的填充颜色。
closePath（） 此方法会通过绘制一条从当前点到开始点的直线来闭合图形。
stroke（） 通过线条来绘制图形轮廓。（不会自动调用closePath（））
fill（） 通过填充区域的内容区域生成实心的图形。（会自动调用closePath（））
arc（x，y，radius，startAngle，endAngle，anticlockwise） 画一个以（x，y）为圆心的以radius为半径的圆弧，从startAngle开始到endAngle 结束，按照anticlockwise给定的方向（默认为顺时针）生成。JS中用到的知识点
Math.round（） 可对一个数进四舍五入取整。
Math.random（） 可生成一个0~1之间的随机数。
Math.sin（） 正弦函数。
Math.PI（）圆周率。
splice（） 可用于删除数组中指定的元素。
两个参数：参数一：删除数组第几个。
参数二：删除几个数据。————————————————
原文链接：https://blog.csdn.net/weixin_43571052/article/details/90233193