HTML5+Canvas的黑洞特效

<头>
<元字符集=“utf-8”>


<风格>
帆布 {＃＃＃   位置：绝对；
  顶部：0;
  左：0；
}
</风格>

</头>
<正文>



<脚本>
让 w = c.width = window.innerWidth;
让 h = c.height = window.innerHeight;

const ctx = c.getContext('2d');
常量选项 = {
    十六进制长度：30，
    lenFn: ({ len, t }) =>
      len + Math.sin(t),
    radFn: ({ rad, len, t, 兴奋 }) =>
      rad + (兴奋 + opts.propFn({ len, t }))*2 / 4,
    propFn: ({ len, t }) =>; 
      len / opts.hexLength / 10 - t,
    兴奋Fn: ({ len, t }) =>
       Math.sin(opts.propFn({ len, t }))**2,
    colorFn: ({ rad, 兴奋度, t }) => 
      `hsl(${rad / Math.TAU * 360 + t}, ${兴奋 * 100}%, ${20 + 兴奋 * 50}%)`,
    时间步长: .01,
    随机夹具：8，
  
    重绘颜色: 'rgba(0,0,0,.1)'
  };
让勾号 = 0;

数学.TAU = 6.28318530717958647692;

常量顶点 = [];
顶点类 {
  构造函数({ x, y }) {
    this.len = Math.sqrt(x*x + y*y);
    this.rad = Math.acos(x / this.len) * (y > 0 ? 1 : -1) + .13;
    this.prevPoint = { x, y };
  }
  
  步（） {＃＃＃     const兴奋 = opts.excitementFn({ len: this.len, t: 勾选 });
    常量参数 = { 
      len: this.len,
      拉德：这个.rad，
      t：勾选，
      激动＃＃＃     };
    const nextLen = opts.lenFn(param);
    const nextRad = opts.radFn(param);
    const color = opts.colorFn(param);
    
    ctx.描边样式 = 颜色;
    ctx.lineWidth = 兴奋 + .2;
    ctx.beginPath();
    ctx.moveTo(this.prevPoint.x, this.prevPoint.y);
    this.prevPoint.x = nextLen * Math.cos(nextRad) +
      Math.random() * (1-兴奋)**2 * opts.randomJig * 2 - opts.randomJig;
    this.prevPoint.y = nextLen * Math.sin(nextRad) +
      Math.random() * (1-兴奋)**2 * opts.randomJig * 2 - opts.randomJig;
    ctx.lineTo(this.prevPoint.x, this.prevPoint.y);
    ctx.中风();
  }
  
  静态生成（）{
    顶点.长度 = 0; 
    const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
    const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;

  
    让alternanceX = false;
    for(令 x = 0; x < w; x += hexCos) {
      让alternance = alternanceX = !alternanceX;
      for(let y = 0; y < h; y += hexSin + opts.hexLength) {
        交替 = !交替;
        顶点.push(新顶点({
          x: x - w / 2,
          y: y + 交替 * hexSin - h / 2
        }))
      }
    }
    
  }
}

顶点.gen();

ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
const anim = () =>; {
#   window.requestAnimationFrame(anim);
  
  勾选 += opts.timeStep;
  
  ctx.fillStyle = opts.repaintColor;
  ctx.fillRect(0, 0, w, h);
  
  ctx.translate(w/2, h/2);
  vertices.forEach((vertex) => vertex.step());
  ctx.translate(-w/2, -h/2);
}
动画（）；

window.addEventListener('调整大小', () => {
  w = c.width = window.innerWidth;
  h = c.height = window.innerHeight;
  
  顶点.gen();
  勾选= 0;
  ctx.fillStyle = '#222';
  ctx.fillRect(0, 0, w, h);
})
</脚本>

</body>

</html>

这是一个HTML5+Canvas的特效，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。