Canvas模拟海葵摆动效果

海葵在海洋中随着海浪的起伏有节奏的左右摆动(当然也有可能上下摆动),对于其左右摆动的动画,我们可以通过正弦函数的特性来完成,我们都知道正弦函数的区间在-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

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: https://www.deanhan.cn/js-bai.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章