Arrow Mouse follower
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Follow Mouse</title> <style> canvas {//w w w. j a v a 2 s .c o m border: 1px solid red; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> class Arrow { constructor() { this.x = 0; this.y = 0; this.rotation = 0; } draw(context) { context.save(); context.translate(this.x, this.y); context.rotate(this.rotation); context.lineWidth = 2; context.beginPath(); context.moveTo(30, 0); context.lineTo(-20, -25); context.moveTo(30, 0); context.lineTo(-20, 25); context.closePath(); context.stroke(); context.restore(); } } window.onload = function() { let canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), mouse = captureMouse(canvas), arrow = new Arrow(), speed = 3; (function drawFrame() { window.requestAnimationFrame(drawFrame, canvas); context.clearRect(0, 0, canvas.width, canvas.height); let dx = mouse.x - arrow.x, dy = mouse.y - arrow.y, angle = Math.atan2(dy, dx), //radians vx = Math.cos(angle) * speed, vy = Math.sin(angle) * speed; if (dx > 10 || dy > 10) { arrow.rotation = angle; arrow.x += vx; arrow.y += vy; } arrow.draw(context); }()); }; function captureMouse(element) { let mouse = { x: 0, y: 0, event: null }, body_scrollLeft = document.body.scrollLeft, element_scrollLeft = document.documentElement.scrollLeft, body_scrollTop = document.body.scrollTop, element_scrollTop = document.documentElement.scrollTop, offsetLeft = element.offsetLeft, offsetTop = element.offsetTop; element.addEventListener('mousemove', function(event) { let x, y; if (event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else { x = event.clientX + body_scrollLeft + element_scrollLeft; y = event.clientY + body_scrollTop + element_scrollTop; } x -= offsetLeft; y -= offsetTop; mouse.x = x; mouse.y = y; mouse.event = event; }, false); return mouse; } </script> </body> </html>