canvas+css3书写转圈的心空

1、新建html文档。

2、书写hmtl代码。<canvas id="c

3、书写css代码。<style>canvas { position: absolute; top: 0; left: 0; }</style>

4、书写并添加js代码。<script>let w = c.width = window.innerWidth;let h = c.height = window.innerHeight;const ctx = c.getContext('2d');const opts = {    hexLength: 30,    lenFn: ({ len, t }) =>      len + Math.sin(t),    radFn: ({ rad, len, t, excitement }) =>      rad + (excitement + opts.propFn({ len, t }))*2 / 4,    propFn: ({ len, t }) =>       len / opts.hexLength / 10 - t,    excitementFn: ({ len, t }) =>       Math.sin(opts.propFn({ len, t }))**2,    colorFn: ({ rad, excitement, t }) =>       `hsl(${rad / Math.TAU * 360 + t}, ${excitement * 100}%, ${20 + excitement * 50}%)`,    timeStep: .01,    randomJig: 8,      repaintColor: 'rgba(0,0,0,.1)'  };let tick = 0;Math.TAU = 6.28318530717958647692;const vertices = [];class Vertex {  constructor({ 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 };  }    step() {    const excitement = opts.excitementFn({ len: this.len, t: tick });    const param = {       len: this.len,      rad: this.rad,      t: tick,      excitement    };    const nextLen = opts.lenFn(param);    const nextRad = opts.radFn(param);    const color = opts.colorFn(param);        ctx.strokeStyle = color;    ctx.lineWidth = excitement + .2;    ctx.beginPath();    ctx.moveTo(this.prevPoint.x, this.prevPoint.y);    this.prevPoint.x = nextLen * Math.cos(nextRad) +       Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;    this.prevPoint.y = nextLen * Math.sin(nextRad) +      Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;    ctx.lineTo(this.prevPoint.x, this.prevPoint.y);    ctx.stroke();  }    static gen() {    vertices.length = 0;     const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;    const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;      let alternanceX = false;    for(let x = 0; x < w; x += hexCos) {      let alternance = alternanceX = !alternanceX;      for(let y = 0; y < h; y += hexSin + opts.hexLength) {        alternance = !alternance;        vertices.push(new Vertex({          x: x - w / 2,          y: y + alternance * hexSin - h / 2        }))      }    }      }}Vertex.gen();ctx.fillStyle = '#222';ctx.fillRect(0, 0, w, h);const anim = () => {  window.requestAnimationFrame(anim);    tick += 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);}anim();window.addEventListener('resize', () => {  w = c.width = window.innerWidth;  h = c.height = window.innerHeight;    Vertex.gen();  tick = 0;  ctx.fillStyle = '#222';  ctx.fillRect(0, 0, w, h);})</script>

5、代码整体结构。

6、查看效果。