连接点

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

let c = document.getElementById("theCanvas");

let ctx = c.getContext("2d"),
  halfWidth = window.innerWidth / 2,
  halfHeight = window.innerHeight / 2;

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

c.addEventListener('click', addDot);

let prevX = 0,
  prevY = 0,
  cx = 0,
  cy = 0;

function addDot(e) {
  let size = 0;

ctx.fillStyle = 'white';
  ctx.strokeStyle = 'white';

ctx.beginPath();

if (e.x && e.y) {
    drawDot(e.x, e.y, size);
  } else {
    drawDot(e.clientX, e.clientY, size);
  }
}

function addLine(x, y, px, py) {
  let goingForward = false,
    goingUp = false;

ctx.beginPath();
  ctx.moveTo(px, py);
  cx = px;
  cy = py;

if (cx < x) {
    goingForward = true;
  }

if (cy > y) {
    goingUp = true;
  }

drawLine(x, y, goingForward, goingUp);
}

function drawLine(x, y, gf, gu) {
  let metX = false,
    metY = false;

c.removeEventListener('click', addDot);

ctx.lineTo(cx, cy);
  ctx.stroke();

if (gf) {
    if (cx >= x) {
      metX = true;
    }

if (cx < x && !metX) {
      cx += 4;
    }

} else {
    if (cx <= x) {
      metX = true;
    }

if (cx > x && !metX) {
      cx -= 4;
    }
  }

if (gu) {
    if (cy <= y) {
      metY = true;
    }

if (cy > y && !metY) {
      cy -= 4;
    }

} else {
    if (cy >= y) {
      metY = true;
    }

if (cy < y && !metY) {
      cy += 4;
    }
  }

if (!metY || !metX) {
    requestAnimationFrame(function() {
      drawLine(x, y, gf, gu);
    });
  } else {
    prevX = x;
    prevY = y;
    c.addEventListener('click', addDot);
  }
}

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