JavaScript利用canvas实现鼠标跟随特效

更新时间：2022年10月12日 10:30:29 作者：蜡笔小心_

canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做。本文就来利用canvas制作个简单的鼠标跟随特效，快跟随小编一起学习一下吧

前言

canvas是一个很神奇的玩意儿，比如画表格、画海报图都要用canvas去做，前几天有用css去做一个鼠标跟随的恶魔之眼的动画效果，想着能不能用canvas也做一个鼠标跟随的效果呢？

创建canvas画布

canvas画布创建可以直接用canvas标签即可

<canvas></canvas>

也没有过多的样式，基本都是用js去完成画布中的内容的

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

定义一个canvas 2D的画布

定义鼠标 x / y

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

innerWidth 和 innerHeight 都属于window下面的参数

初始化canvas

初始化的过程就是给canvas定义宽高，直接设置为全屏的窗口宽高即可

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

画箭头

箭头就是两条线经过旋转角度之后拼接在一起的

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 方法就是循环画线的，通过在某个节点调用这个方法就可以循环画线

为了方便更新鼠标事件，我们可以把画线的方法放到一个类里面

class Arrow {
    // 画线的方法
}

在初始化的时候，就可以直接调用类方法了

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

循环动画

动画就是一直更新箭头的方向，所以需要在画线的类里面添加一个更新方法用来刷新画线

class Arrow {
    // 画线的方法
    
    // 更新方法
    update() {
        this.draw();
    }
}

添加完更新方法之后，就可以开始循环动画了

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

鼠标事件

鼠标在页面上随意移动时的事件方法

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

监听窗口大小，便于修改canvas的宽度和更新初始化方法

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

还可以加上移动端上的 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;
});

实现效果

以上就是JavaScript利用canvas实现鼠标跟随特效的详细内容，更多关于JavaScript canvas鼠标跟随特效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

颜色渐变效果
[蓝色]颜色渐变效果...
2006-07-07
JavaScript引用赋值与传值赋值总结
这篇文章主要介绍了JavaScript引用赋值与传值赋值总结，在JavaScript中基本数据类型都是传值赋值，复合数据类型都是引用赋值(传地址)也叫引用传址，下文更多相关资料，需要的小伙伴可以参考一下
2022-05-05
JavaScript实现修改伪类样式
这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现过程，一起学习参考下吧。
2017-11-11
JS进阶之从多线程到Event Loop全面梳理
JS是通过事件队列(Event Loop)的方式来实现异步回调的，但对很多初学JS的人来说，根本搞不清楚单线程的JS为什么拥有异步的能力，所以本文将从进程、线程的角度来解释这个问题
2023-05-05
JS中图片缓冲loading技术的实例代码
这篇文章介绍了JS中图片缓冲loading技术的实例代码，有需要的朋友可以参考一下
2013-08-08
JS截取字符串 subStr()、substring()、slice() 方法示例详解
这篇文章主要介绍了JS截取字符串 subStr()、substring()、slice() 方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
Javascript调用函数方法的几种方式介绍
这篇文章主要介绍了Javascript调用函数方法的几种方式介绍,本文讲解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5种方式,需要的朋友可以参考下
2015-03-03
js实现base64文件的处理以及下载方法
Base64是一种将二进制数据编码为ASCII字符的编码方式,这篇文章主要给大家介绍了关于js实现base64文件的处理以及下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
用JS做的简单的可折叠的两级树形菜单
可折叠的树形菜单想必大家并不陌生吧，实现方法有多种，在本文将为大家介绍下js是如何实现的，希望对大家有所帮助
2013-09-09
js逆向解密之网络爬虫
在本篇内容里小编给大家整理的是关于js逆向解密之网络爬虫的相关知识点内容，需要的朋友们参考下。
2019-05-05