Agar.io风格的波纹效果为帆布弧

Question

我真的很喜欢他们如何创建在线游戏agario.我一直在想:"他们是如何为边缘创造这种涟漪效应的？"

我能想到一些事情:

1)边框由许多矢量点组成,因此允许灵活的边框动画.

2)边框是预定义的gif,如动画.

3)边缘周围有许多不可见的像素.它们围绕弧线循环并激活这些像素的几组,因此产生边界"收缩"和"收缩"的错觉.

如何在HTML5画布中完成这样的事情？您认为解决方案的3个想法之一适用还是比这更复杂？

Answer 1

你可以做的是在圆周上重复绘制一个正弦波.

获得围绕圆的任意角度的正弦波[x,y]点的方程是:

var x = centerX+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
var y = centerY+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);

该centerX, centerY and radius定义圆.

该amplitude决定正弦波将从圆的周长多远.

在sineCount完成正弦波,将周围一圈绘制的数量.

这angle是你想要"正义"[x,y]的圆周围的当前角度.

这是一个示例和一个演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cx=150;
var cy=150;
var radius=100;
var amp=10;
var sineCount=10;

ctx.beginPath();
for(var i=0;i<360;i++){
  var angle=i*Math.PI/180;
  var pt=sineCircleXYatAngle(cx,cy,radius,amp,angle,sineCount);
  ctx.lineTo(pt.x,pt.y);
}
ctx.closePath();
ctx.stroke();

function sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){
  var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
  var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);
  return({x:x,y:y});
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>