最近看了很多牛的动画，想想自己的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=0function 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.5if(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>