如何制作霓虹灯动画?

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

起因

网上认识的某FE 找我接的私活,想想觉得可以就干了。

样式

思路

绘制好灯泡运动的圆角矩形路径,每个路径点入栈,每次渲染都基于各个路径点坐标绘制小灯泡,周而复始。

怎么画圆角矩形

非常简单,就是步骤比较繁琐,需要定位一个起始点 然后依次。

上、右上圆角、右、右下圆角、下、左下圆角、左、左上圆角:

function drawRoundedRect(x,y,w,h,r,bdWidth=3,bdColor,bgcolor){
  ctx.beginPath();
  ctx.moveTo(x+r,y);
  ctx.lineWidth = bdWidth;
  ctx.strokeStyle = bdColor;
  ctx.arcTo(x+w,y,x+w,y+h,r);
  ctx.arcTo(x+w,y+h,x,y+h,r);
  ctx.arcTo(x,y+h,x,y,r);
  ctx.arcTo(x,y,x+w,y,r);
  ctx.stroke();
  if(bgcolor) {
    ctx.fillStyle = bgcolor;
    ctx.fill()
  };
  ctx.closePath();
}

我们通过这个函数,可以尝试先绘制出两个圆角矩形:

pic

获得灯泡的运动轨迹

和绘制圆角矩形相同,我们需要获得灯泡的运动轨迹:

function getTrail () {
  var sx = fx + 15, sy = fy + 5, w = bw - 10, h = bh - 10, result = [],
      section = 2, // 轨迹点间隔区间 
      csection = 0.1, // 圆轨迹区间
      ccp = [0,0]          // 圆角圆心点
      coffset = -(PI/2);   // 圆轨迹起始位置

  // 上边
  for (var i = sx; i<=w; i+=section) {
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/neon-light.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部