海葵在海洋中随着海浪的起伏有节奏的左右摆动（当然也有可能上下摆动），对于其左右摆动的动画，我们可以通过正弦函数的特性来完成，我们都知道正弦函数的区间在－1到1之间，正好满足左右摆动。再结合quadraticCurveTo这个API就可以实现左右摆动海葵的绘制。
实现代码如下：

var Bai = (function(window,document,undefined){
  var canvas,ctx,w,h,x,y,mx,my,a,deltaTime,lastTime,kmp;
  function init(){
    canvas = document.createElement('canvas');
    ctx = canvas.getContext('2d');
    w = window.innerWidth;
    h = window.innerHeight;
    canvas.width = w;
    canvas.height = h;
    document.body.appendChild(canvas);
    x = w - 50;
    y = h;
    a = 0;
    //摆动幅度
    kmp = 30;
    lastTime = Date.now();
    draw();
  }
  function draw(){
    requestAnimationFrame(draw);
    ctx.clearRect(0,0,w,h);
    var now = Date.now();
    deltaTime = now - lastTime;
    lastTime = now;
    a += deltaTime * 0.001;
    var r = Math.sin(a);
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#f00';
    ctx.moveTo(x,y);
    ctx.quadraticCurveTo(x,y-30,x+r*kmp,y-120);
    ctx.stroke();
    ctx.restore();
  }
    return { init : init };
})(window,document);

Bai.init();

在线Demo：http://demo.deanhan.cn/bai