Всемогущий,
https://stackoverflow.com/questions/...o-mouse-coords
https://www.c-sharpcorner.com/Upload...sor-move-ball/
код из последней ссылки
<!DOCTYPE HTML>
<html>
<head>
<title>Cursor Move Ball </title>
<meta charset="utf-8">
<style type="text/css">
canvas { border: 1px solid black; }
#game{background:Grey}
</style>
<script type="text/javascript">
var a=0;
var b=0;
var mA=0;
var mB=0;
var delay=10;
var timer=10;
function init(){
var canvas = document.getElementById('game');
//loop calls create each 20 ms
setInterval(create,10);
canvas.addEventListener('click', ev_cursor, false);
}
function ev_cursor (ev) {
mA = ev.layerX;
mB = ev.layerY;
}
function create(){
var canvas = document.getElementById('game');
if (canvas.getContext){
var c = canvas.getContext('2d');
timer+=1;
c.fillStyle ="Blue";
c.strokeStyle="#000";
delay=20-(mB/100);
accelX=mA-a;
accelY=mB-b;
a+=(accelX)/delay;
b+=(accelY)/delay;
a+=Math.sin(timer)*accelX/5;
b+=Math.sin(timer)*accelY/5;
c.clearRect(0,0,1000,900);
c.beginPath();
c.arc(a,b,100,0,Math.PI*2,true); // 100 is ball size
c.fill();
}
}
</script>
</head>
<body onload="init();">
<div><h1>HTML5 Cursor Move Ball </h1></div>
<canvas id="game" width="1000" height="800" >
</canvas>
</body>
</html>
