使用JS实现鼠标指针特效
效果图：
代码如下，复制即可使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>你想往哪里走</title> </head> <body> <canvas id='canvas' width="500" height="500" style="background:#ccc;"> 你的浏览器不行啊~ </canvas> <!--箭头函数--> <script> function Arrow() { this.x = 0; //初始位置 this.y = 0; this.rotation = 0; //初始旋转角度 this.color = '#ffff00'; } //在原型上定义draw方法 Arrow.prototype.draw = function(context) { context.save(); context.translate(this.x, this.y); //将坐标移到this.x 和 this.y context.rotate(this.rotation); //设置旋转角度 context.lineWidth = 5; //设置线宽 context.fillStyle = this.color; //设置填充色 context.beginPath(); //路径开始 context.moveTo(-50, -25); context.lineTo(0, -25); context.lineTo(0, -50); context.lineTo(50, 0); context.lineTo(0, 50); context.lineTo(0, 25); context.lineTo(-50, 25); context.closePath(); //路径闭合 context.stroke(); //描边 context.fill(); //填充 context.restore(); } </script> <!-- 工具函数 --> <script> //将utils定义为window对象下的一个属性，属性值为对象 window.utils = {}; //在utils对象上定义捕获坐标的方法 window.utils.captureMouse = function(element) { //定义一个名为mouse的对象 var mouse = { x: 0, y: 0 }; //为元素绑定mousemove事件 element.addEventListener('mousemove', function(event) { var x, y; //获取鼠标位于当前屏幕的位置， 并作兼容处理 if (event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else { x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } //将当前的坐标值减去元素的偏移位置，即为鼠标位于当前canvas的位置 x -= element.offsetLeft; y -= element.offsetTop; mouse.x = x; mouse.y = y; }, false); //返回值为mouse对象 return mouse; } </script> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var centerX = canvas.width/2; var centerY = canvas.height/2; //传入canvas,获取鼠标在canvas上移动是的坐标 var mouse = utils.captureMouse(canvas); //新建一个arrow对象 var arrow = new Arrow(); //将arrow的坐标设置为canvas的中心 arrow.x = centerX; arrow.y = centerY; //动画循环函数 (function drawFrame(){ window.requestAnimationFrame(drawFrame,canvas); context.clearRect(0, 0, canvas.width, canvas.height); //获取dy,dx值 var dx = mouse.x - arrow.x, dy = mouse.y - arrow.y; //设置旋转角度 arrow.rotation = Math.atan2(dy, dx); //调用draw方法画出 arrow.draw(context); })(); } </script> </body> </html>
如果你有更好的点子、想法，可以跟大家一起分享哦，如有错误，欢迎联系我指正，非常感谢！！！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12318.html