web前端：canvas动画彩色气泡，原生js类直播间点赞效果实现
1.气泡事件-随机位置/颜色梦幻全屏
1.less
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wrap {
overflow: hidden;
height: 600px;
width: 600px;
position: absolute;
background: skyblue;
border: 10px solid steelblue;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
box-shadow: 2px 5px 5px #000000;
h1 {
position: absolute;
text-align: center;
color: tomato;
top: 10%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
h2 {
position: absolute;
float: right;
margin-right: 10%;
color: white;
top: 20%;
right: -15%;
transform: translate3d(-50%, -50%, 0);
}
#wrap-canvas {
position: absolute;
top: 61%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background: tomato;
}
}
}
}
3.js
$(function() {
var canvasNode = document.querySelector("#wrap-canvas");
canvasNode.width = 550;
canvasNode.height = 450;
if(canvasNode.getContext) {
var canvasPen = canvasNode.getContext("2d");
/***简易canvas动画position***/
/*var flag=0;
setInterval(function(){
//每次进入清理画布
canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
flag++;
canvasPen.save();
canvasPen.strokeStyle="white";
canvasPen.beginPath();
//位置变动
canvasPen.strokeRect(flag,flag,100,100);
canvasPen.restore();
//1s/60次
},1000/60);*/
/*arc(x,y（圆形位置）,radius半径,startAngle开始角度,endAngle结束角度,anticlockwise时间方向-true逆时针|false顺时针)
|- arc(x,y,radius,startAngle,endAngle,anticlockwise)
|- canvasPen.arc(150,150,10,0,360*Math.PI/180);
Math.random -->返回[0-1)：包括0，但不包括1
* 开区间(a,b) : a和b之间，不包括a、b
* 闭区间[a,b] : a和b之间，包括a、b
* Math.random()*mosaicSize=[0,5]
* 1个像素的mosaic：并且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]
*/
//随机圆位置
var positionArr = [];
//1.绘制圆
setInterval(function() {
var x = Math.random() * canvasNode.width;
var y = Math.random() * canvasNode.height;
var radius = 10;
//颜色随机，取整
var r=Math.round(Math.random() *255);
var g=Math.round(Math.random() *255);
var b=Math.round(Math.random() *255);
var a=1;
positionArr.push({
x: x,
y: y,
radius: radius,
r:r,
g:g,
b:b,
a:a
});
}, 50);
//2.将数组中的圆绘制到画布
setInterval(function() {
canvasPen.clearRect(0, 0, canvasNode.width, canvasNode.height);
//每次进入循环，半径变化
console.log(positionArr);
for(var j=0;j<positionArr.length;j++){
//限制max最大值,不限制则成为无限放大循环梦幻斑点，可取消判断
/*if(positionArr[j].radius<=80){
positionArr[j].radius++;
}*/
//透明度<0，不需要绘制画布
if(positionArr[j].a<=0){
//去掉第j个元素，去掉1个
positionArr.splice(j,1);
}
positionArr[j].radius++;
positionArr[j].a-=0.01;
}
//绘制随机数组的圆
for(var i = 0; i < positionArr.length; i++) {
canvasPen.save();
//随机色
canvasPen.fillStyle = "rgba("+positionArr[i].r+","+positionArr[i].g+","+positionArr[i].b+","+positionArr[i].a+")";
canvasPen.beginPath();
canvasPen.arc(positionArr[i].x, positionArr[i].y, positionArr[i].radius, 0, 2 * Math.PI);
canvasPen.fill();
canvasPen.restore();
}
//每秒60次
},1000/60);
}
})
4.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>canvas动画气泡-bubbletitle>
<link rel="stylesheet" href="css/4-canvas-bubble.css" />
head>
<body>
<div id="wrap">
<h1>canvas动画气泡-bubbleh1>
<h2>PS：一刀coderh2>
<canvas id="wrap-canvas">canvas>
div>
body>
<script type="text/javascript" src="../../6-bootstrap/js/jquery.min.js">script>
<script type="text/javascript" src="js/4-canvas-bubble.js">script>
html>
5.效果图
![canvas
2.彩色气泡事件-固定位置向上浮动
1.js更新
$(function() {
var canvasNode = document.querySelector("#wrap-canvas");
canvasNode.width = 550;
canvasNode.height = 450;
if(canvasNode.getContext) {
var canvasPen = canvasNode.getContext("2d");
/***简易canvas动画position***/
/*var flag=0;
setInterval(function(){
//每次进入清理画布
canvasPen.clearRect(0,0,canvasNode.width,canvasNode.height);
flag++;
canvasPen.save();
canvasPen.strokeStyle="white";
canvasPen.beginPath();
//位置变动
canvasPen.strokeRect(flag,flag,100,100);
canvasPen.restore();
//1s/60次
},1000/60);*/
/*arc(x,y（圆形位置）,radius半径,startAngle开始角度,endAngle结束角度,anticlockwise时间方向-true逆时针|false顺时针)
|- arc(x,y,radius,startAngle,endAngle,anticlockwise)
|- canvasPen.arc(150,150,10,0,360*Math.PI/180);
Math.random -->返回[0-1)：包括0，但不包括1
* 开区间(a,b) : a和b之间，不包括a、b
* 闭区间[a,b] : a和b之间，包括a、b
* Math.random()*mosaicSize=[0,5]
* 1个像素的mosaic：并且需要向下取整Math.floor(Math.random()*mosaicSize)=[0,5)-->[0-4]
*/
//随机圆位置
var positionArr = [];
//1.绘制圆
setInterval(function() {
//radius最小值=5
var radius = Math.random() * 6 + 2;
var x = Math.random() * canvasNode.width;
//var y = Math.random() * canvasNode.height;
//取消随机y轴，
var y = canvasNode.height - radius;
//颜色随机，取整
var r = Math.round(Math.random() * 255);
var g = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var a = 1;
//运动曲线，旋转deg，起始点，影响因子,因子越大，旋转deg幅度越大
var deg = 0;
var initialX = x;
var initialY = y;
//var effect = 20;
//随机因子
var effect=Math.random()*20+10;
positionArr.push({
x: x,
y: y,
radius: radius,
r: r,
g: g,
b: b,
a: a,
deg: deg,
initialX: initialX,
initialY: initialY,
effect: effect
});
}, 50);
//2.将数组中的圆绘制到画布
setInterval(function() {
canvasPen.clearRect(0, 0, canvasNode.width, canvasNode.height);
//每次进入循环，半径变化
console.log(positionArr);
//1.生成动画
for(var j = 0; j < positionArr.length; j++) {
//限制max最大值,不限制则成为无限放大循环梦幻斑点，可取消判断
/*if(positionArr[j].radius<=80){
positionArr[j].radius++;
}*/
//透明度<0，不需要绘制画布,Radius随机，不需要指定半径和透明度
/*if(positionArr[j].a<=0){
//去掉第j个元素，去掉1个
positionArr.splice(j,1);
}
positionArr[j].radius++;
positionArr[j].a-=0.01;*/
/*曲线运动,系数增加运动速度*/
positionArr[j].deg+=7;
//更改圆心
/*canvasNode.style.left=initialX+(deg*Math.PI/180)*effect/2+"px";
canvasNode.style.top=initialY+Math.sin(deg*Math.PI/180)*effect*2+"px";*/
//canvas不加ps，顺时针自左向右旋转
/*positionArr[j].x = positionArr[j].initialX + (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect / 2 ;
positionArr[j].y = positionArr[j].initialY + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;*/
//自下而上旋转
positionArr[j].x = positionArr[j].initialX + Math.sin(positionArr[j].deg * Math.PI / 180) * positionArr[j].effect * 2;
//曲线运动波长配置：positionArr[j].effect * 2
positionArr[j].y = positionArr[j].initialY - (positionArr[j].deg * Math.PI / 180) * positionArr[j].effect ;
//判断位置大于画布则删除,最高top=y
if(positionArr[j].y<=50){
positionArr.splice(j,1);
}
}
//2.生成动画元数据：绘制随机数组的圆
for(var i = 0; i < positionArr.length; i++) {
canvasPen.save();
//随机色
canvasPen.fillStyle = "rgba(" + positionArr[i].r + "," + positionArr[i].g + "," + positionArr[i].b + "," + positionArr[i].a + ")";
canvasPen.beginPath();
canvasPen.arc(positionArr[i].x, positionArr[i].y, positionArr[i].radius, 0, 2 * Math.PI);
canvasPen.fill();
canvasPen.restore();
}
//每秒60次
}, 1000 / 60);
}
})