最近看了很多牛的動畫，想想自己的canvas的確很菜。
公式在那里，但是不是太會套。找demo發現都是很難的
於是找了個簡單的效果
圓環從中間擴散的效果
關鍵是 globalCompositeOperation合成操作，只留下重疊的部分
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圓形擴散</title>
<style>
body {
overflow: hidden;
background: #000;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
var oAnim=document.getElementById('canvas');
var context = oAnim.getContext("2d");
var radius=0
function drawCircle(){
context.beginPath();
render(radius);
context.arc(50,50,radius,0,Math.PI * 2);
context.closePath();
context.lineWidth=2;
context.strokeStyle='rgba(250,250,50,1)';
context.stroke();
radius +=0.5;//每幀半徑增加0.5
if(radius > 20){
radius=0;
}
}
function render(x) {
//默認值為source-over,覆蓋原圖上面，效果像z-index:999
var prev = context.globalCompositeOperation;
//只顯示canvas上原圖像的重疊部分
context.globalCompositeOperation = 'destination-in';
//設置主canvas的繪制透明度，圓圈中間的淺黃色部分
context.globalAlpha = 0.95;
//這一步目的是將canvas上的圖像變的透明
context.fillRect(0,0,40*x,40*x);
//在原圖像上重疊新圖像
context.globalCompositeOperation = prev;
//下面代用的drawcricle方法，圓圈覆蓋在正方形上
};
//在主canvas上畫新圓
setInterval(function(){
drawCircle();
},20);
</script>
</html>