canvas实现动画主要是靠设置定时器（setinterval（））和定时清除画布里的元素实现，canvas动画上手很简单，今天可以自己动手来实现一个酷炫气泡效果。
- 气泡炸裂效果（类似水面波纹）
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas实现气泡效果</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: gray;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: white;
}
</style>
<script>
window.onload=function(){
var oc=document.querySelector("canvas");
if(oc.getContext){
var ctx=oc.getContext("2d");
// 定义一个数组，用来保存canvas中各个圆的信息；
var arr=[];
//随机取出数组中的圆，绘制在canvas中；
setInterval(function(){
for(var i=0;i<arr.length;i++){
arr[i].r++;
arr[i].apl-=0.01;
if(arr[i].apl<=0){
arr.splice(i,1);
}
}
ctx.clearRect(0,0,oc.width,oc.height);
for(var i=0;i<arr.length;i++){
ctx.save();
ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
ctx.fill();
ctx.restore();
}
},1000/60);
// 向数组中随机注入圆的信息；
setInterval(function(){
var red=Math.round(Math.random()*255);
var green=Math.round(Math.random()*255);
var blue=Math.round(Math.random()*255);
var apl=1;
var x=Math.random()*oc.width;
var y=Math.random()*oc.height;
var r=10;
arr.push(
{
red:red,
green:green,
blue:blue,
apl:apl,
x:x,
y:y,
r:r
}
);
},50);
}
}
</script>
</head>
<body>
<canvas width="400" height="400"></canvas>
</body>
</html>
- 气泡上升效果
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas实现气泡效果</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: gray;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: white;
}
</style>
<script>
window.onload=function(){
var oc=document.querySelector("canvas");
if(oc.getContext){
var ctx=oc.getContext("2d");
// 定义一个数组，用来保存canvas中各个圆的信息；
var arr=[];
//随机取出数组中的圆，绘制在canvas中；
setInterval(function(){
for(var i=0;i<arr.length;i++){
arr[i].r++;
arr[i].apl-=0.01;
if(arr[i].apl<=0){
arr.splice(i,1);
}
}
ctx.clearRect(0,0,oc.width,oc.height);
for(var i=0;i<arr.length;i++){
ctx.save();
ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].apl+")";
ctx.beginPath();
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
ctx.fill();
ctx.restore();
}
},1000/60);
// 向数组中随机注入圆的信息；
setInterval(function(){
var red=Math.round(Math.random()*255);
var green=Math.round(Math.random()*255);
var blue=Math.round(Math.random()*255);
var apl=1;
var x=Math.random()*oc.width;
var y=Math.random()*oc.height;
var r=10;
arr.push(
{
red:red,
green:green,
blue:blue,
apl:apl,
x:x,
y:y,
r:r
}
);
},50);
}
}
</script>
</head>
<body>
<canvas width="400" height="400"></canvas>
</body>
</html>