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鼠标跟随特效的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了javascript事件环 微任务和宏任务队列原理，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
滑块验证码是在网站、APP等应用中常见的一种验证方式，通过按照一定规则滑动滑块到指定位置完成验证，才可以进行下一步操作，本文给大家分享基于JavaScript实现拼图式滑块验证功能，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要为大家详细介绍了用js实现放大镜效果，利用背景图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
Uniapp 是一款跨平台开发框架,可以同时开发出可以在多个平台上运行的应用,在开发过程中,我们常常需要自定义导航栏来满足 UI 设计的需求,本文将介绍如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小,需要的朋友可以参考下2023-09-09
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
这篇文章主要介绍了BootStrap与validator 使用笔记(JAVA SpringMVC实现)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了Js查找字符串中出现次数最多的字符及个数 ,本文分为传统写法和正则写法两种方法给大家介绍了js查找字符串出现次数最多的字符及个数，非常不错，感兴趣的朋友参考下吧2016-09-09
在我们的日常开发过程中，我们经常会遇到数字与字符串转换，检查对象中是否存在对应值，条件性操作对象数据，过滤数组中的错误值，等等这类处理。本文整理出了一些常用的小技巧，希望大家能喜欢2022-06-06
近几日使用uni-app开发移动应用APP遇到了个不常见的需求,下面这篇文章主要给大家介绍了关于uniapp自定义应用退出执行内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
按位非运算符，简单的理解就是改变运算数的符号并减去1，当然，这是只是简单的理解能转换成number类型的数据2011-07-07
最新评论