快捷導(dǎo)航

JavaScript利用canvas實(shí)現(xiàn)鼠標(biāo)跟隨特效

更新時(shí)間：2022年10月12日 10:30:29 作者：蠟筆小心_

canvas是一個(gè)很神奇的玩意兒，比如畫(huà)表格、畫(huà)海報(bào)圖都要用canvas去做。本文就來(lái)利用canvas制作個(gè)簡(jiǎn)單的鼠標(biāo)跟隨特效，快跟隨小編一起學(xué)習(xí)一下吧

前言

canvas是一個(gè)很神奇的玩意兒，比如畫(huà)表格、畫(huà)海報(bào)圖都要用canvas去做，前幾天有用css去做一個(gè)鼠標(biāo)跟隨的惡魔之眼的動(dòng)畫(huà)效果，想著能不能用canvas也做一個(gè)鼠標(biāo)跟隨的效果呢？

創(chuàng)建canvas畫(huà)布

canvas畫(huà)布創(chuàng)建可以直接用canvas標(biāo)簽即可

<canvas></canvas>

也沒(méi)有過(guò)多的樣式，基本都是用js去完成畫(huà)布中的內(nèi)容的

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

定義一個(gè)canvas 2D的畫(huà)布

定義鼠標(biāo) x / y

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

innerWidth 和 innerHeight 都屬于window下面的參數(shù)

初始化canvas

初始化的過(guò)程就是給canvas定義寬高，直接設(shè)置為全屏的窗口寬高即可

function init() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

畫(huà)箭頭

箭頭就是兩條線(xiàn)經(jīng)過(guò)旋轉(zhuǎn)角度之后拼接在一起的

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);
    }
}

nextPoint 方法就是循環(huán)畫(huà)線(xiàn)的，通過(guò)在某個(gè)節(jié)點(diǎn)調(diào)用這個(gè)方法就可以循環(huán)畫(huà)線(xiàn)

為了方便更新鼠標(biāo)事件，我們可以把畫(huà)線(xiàn)的方法放到一個(gè) 類(lèi) 里面

class Arrow {
    // 畫(huà)線(xiàn)的方法
}

在初始化的時(shí)候，就可以直接調(diào)用類(lèi)方法了

let arrows;

function init() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  arrows = [];
  for (var x = 0; x <= canvas.width + 40; x += 40) {
    for (var y = 0; y <= canvas.height + 40; y += 40) {
      arrows.push(new Arrow(x, y, -20));
    }
  }
}

循環(huán)動(dòng)畫(huà)

動(dòng)畫(huà)就是一直更新箭頭的方向，所以需要在畫(huà)線(xiàn)的類(lèi) 里面添加一個(gè) 更新方法用來(lái)刷新畫(huà)線(xiàn)

class Arrow {
    // 畫(huà)線(xiàn)的方法
    
    // 更新方法
    update() {
        this.draw();
    }
}

添加完更新方法之后，就可以開(kāi)始循環(huán)動(dòng)畫(huà)了

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

鼠標(biāo)事件

鼠標(biāo)在頁(yè)面上隨意移動(dòng)時(shí)的事件方法

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

監(jiān)聽(tīng)窗口大小，便于修改canvas的寬度和更新初始化方法

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

還可以加上移動(dòng)端上的 touch 事件

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;
});

實(shí)現(xiàn)效果