javascript - Canvas 弧的 Agar.io 风格波纹效果

Question

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

我能想到的有几点:

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

2) 边框是预定义的 gif 动画。

3) 边缘周围有很多不可见的像素。它们围绕圆弧循环并激活其中的几组像素，因此产生了边界正在“收缩”和“缩回”的错觉。

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

Answer 1

您可以做的是围绕圆周重复绘制正弦波。

得到绕圆任意 Angular 正弦波[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 和 radius 定义圆。

振幅 决定正弦波从圆周移动的距离。

sineCount 是将围绕圆绘制的完整正弦波的数量。

angle 是您想要“sined”[x,y] 的圆的当前 Angular 。

这是一个示例和演示:

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>