凯尔特螺旋

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 500,
  cx = cw / 2;
var ch = canvas.height = 500,
  cy = ch / 2;
ctx.lineWidth = 2;
var rad = Math.PI / 180;
var frames = 0;
var points = [];
var a1 = -90 * rad;
var a2 = a1 + 120 * rad;
var a3 = a2 + 120 * rad;

var n = 7;
var R = 17 * n;
var c1 = getCenter(a1);
var c2 = getCenter(a2);
var c3 = getCenter(a3);

function getCenter(a) {
  return {
    x: cx + R * Math.cos(a),
    y: cy + R * Math.sin(a)
  }
}

celtic1(c1, 120 * rad);
celtic2(c2, -120 * rad);
celtic1(c2, -120 * rad);
celtic2(c3, 0 * rad);
celtic1(c3, 0 * rad);
celtic2(c1, 120 * rad);

function Draw() {
  elId = window.requestAnimationFrame(Draw);
  if (frames < 4 * n) {
    frames += 2;
  } else {
    frames = 0;
  }
  ctx.clearRect(0, 0, cw, ch);

for (var i = 0; i < points.length; i += 4 * n) {
    var k = i + frames;
    var r = Math.max(Math.abs(points[k].r), 1)*n/5;
    
    ctx.strokeStyle = points[k].color;
    ctx.beginPath();
    ctx.strokeRect(points[k].x, points[k].y, r, r);
    
  }
}
elId = window.requestAnimationFrame(Draw);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg