canvas实现鼠标交互式排斥点线效果代码-html代码-BFW代码库

canvas实现鼠标交互式排斥点线效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现鼠标交互式排斥点线效果代码，鼠标放上去试试。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html, body {
    padding: 0;
    margin: 0;
}
#background-canvas {
    position: absolute;
    top: 0;
    left: 0;
}
</style>



</head>

<body>
  <canvas id="background-canvas"></canvas>

  
      <script>
const canvasEl = document.querySelector('#background-canvas');
const canvasCxt = canvasEl.getContext('2d');

const params = {
  number: 80,
  rotationSpeed: .0005,
  mouseMagnet: 50000,
  trajectorySquash: [2, 1],
  trajectoryAngle: -.4,
  mouseThreshold: .05 };


let mouse = {
  x: 0, y: 0 };


// for codepen preview only
let mouseMoved = false;

// set up the <canvas> and screen object to be used for balls data array
let screen;
resizeCanvas();

// set up balls data array
let ballsData;
initBallsArray();

// run the rendering loop
updateCanvas(0);

// set up events
document.onmousemove = function (e) {
  mouse.x = e.pageX;
  mouse.y = e.pageY;
  // for codepen preview only
  mouseMoved = true;
};
document.ontouchmove = function (e) {
  mouse.x = e.targetTouches[0].pageX;
  mouse.y = e.targetTouches[0].pageY;
  // for codepen preview only
  mouseMoved = true;
};
window.onresize = function () {
  resizeCanvas();
  initBallsArray();
};
window.onclick = function () {
  initBallsArray();
};


// -----------------------------------------

function initBallsArray() {
  ballsData = [];
  for (let i = 0; i < params.number; i++) {
    ballsData[i] = {
      baseX: screen.c[0],
      baseY: screen.c[1],
      x: screen.c[0],
      y: screen.c[1],
      targetX: screen.c[0],
      targetY: screen.c[1],
      r: screen.ballBaseDiameter };

  }
}

function updateCanvas(time) {

  // for codepen preview only
  if (!mouseMoved) {
.........完整代码请登录后点击上方下载按钮下载查看