箭头指向

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");

var mouse = {
  x: innerWidth / 2,
  y: innerHeight / 2 };

class Arrow {
  constructor(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
  }

draw() {
    const center = {
      x: this.x,
      y: this.y };

const xDist = this.x - mouse.x;
    const yDist = this.y - mouse.y;

const distance = Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2));

let radius = this.radius / 3 + this.radius * distance / 600;

if (radius < this.radius) {
      radius = this.radius;
    }

let angle, x, y;

ctx.beginPath();

angle = Math.atan2(yDist, xDist) - 90;
    x = radius * Math.cos(angle) + center.x;
    y = radius * Math.sin(angle) + center.y;

ctx.moveTo(x, y);

nextPoint();

ctx.lineTo(x, y);

nextPoint();

ctx.lineWidth = 1 + distance / 600 * 4;

ctx.stroke();

function nextPoint() {
      angle += 1 / 3 * (2 * Math.PI);
      x = radius * Math.cos(angle) + center.x;
      y = radius * Math.sin(angle) + center.y;
      ctx.lineTo(x, y);
    }
  }

update() {
    this.draw();
  }}

let arrows;

// Animation Loop
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  arrows.forEach(Arrow => {
    Arrow.update();
  });
  requestAnimationFrame(animate);
}

init();
animate();

// Event Listeners
addEventListener("mousemove", function (event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
});

addEventListener("resize", function () {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  init();
});

document.addEventListener("touchstart", function (e) {
  e.preventDefault();
  mouse.x = e.targetTouches[0].clientX;
  mouse.y = e.targetTouches[0].clientY;
});

document.addEventListener("touchmove", function (e) {
  e.preventDefault();
  mouse.x = e.targetTouches[0].clientX;
  mouse.y = e.targetTouches[0].clientY;
});

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