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>