Verschieben eines Objekts zum Klicken auf X und Y mit Leinwand

Question

Ich frage mich, ob es möglich ist, eine Form auf der Leinwand zu bestimmten Koordinaten auf der Leinwand aus einer anderen Reihe von Koordinaten zu verschieben. Ist es in diesem Fall möglich, die Position eines Mausklicks zu ermitteln und ein Objekt zu erstellen, das sich über einen bestimmten Zeitraum an diesen Punkt bewegt? Danke im Vorraus für deine Hilfe!

Answer 1

<canvas id="canvas"></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 

var x2=100,y2=100; 
var dx=0,dy=0; 
var counter=10; 

canvas.width = canvas.height = 256; 
var shape = {x:100, y:100, width : 50, height : 30}; 

function clear() { 
    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
} 

function draw(){ 
if(counter>0){ 
    shape.x=shape.x+dx; 
    shape.y=shape.y+dy; 
    ctx.clearRect(0,0,256,256); 
    ctx.fillStyle = "red"; 
    ctx.strokeStyle = "black"; 
     ctx.fillRect(shape.x, shape.y, shape.width, shape.height); 
     ctx.strokeRect(shape.x, shape.y, shape.width,shape.height); 
    counter--; 
    setTimeout(draw,20) 
    } 
} 

canvas.addEventListener("click", function(e) { 
    clear(); 
    x2=e.clientX; 
    y2=e.clientY; 

    dx=(x2-shape.x)/10; 
    dy=(y2-shape.y)/10; 
    counter=10; 
    draw(); 
}); 

draw(); 

</script>