キャンバスでXとYをクリックしてオブジェクトを移動する

Question

キャンバス上の図形を別の座標系のキャンバス上の特定の座標に移動することができますか？この場合、マウスクリックの位置を取得し、特定の時間にそのポイントに移動するオブジェクトを作成することは可能ですか？事前にあなたの助けをありがとう！

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>