Как перемещать фигуру холста при нажатии?

Question

У меня есть одна фигура из пятиугольника в холсте, и я хочу переместить ее туда, где мышь расположена одним щелчком мыши.

КОД

<canvas id="fld" width="1000px" height="800"></canvas> 
    <script type="text/javascript"><!-- 
    onload = function() { draw(); }; 
    function draw() { 
     var canvas = document.getElementById('fld'); 
     if (! canvas || ! canvas.getContext) {return false;} 
     var ctx = canvas.getContext('2d'); 
     //Pentagon 
     ctx.beginPath(); 
     ctx.strokeStyle = 'rgb(255, 0, 0)'; 
     ctx.moveTo(100,10); 
     for (var i=1;i<=5; ++i) { 
     th=i * 2 * Math.PI/5; 
     x=100+90*Math.sin(th); 
     y=100-90*Math.cos(th); 
     ctx.lineTo(x,y); 
     } 
     ctx.stroke(); 
     ctx.beginPath(); 
     ctx.arc(900, 60, 40, 0, 2 * Math.PI, false); 
     ctx.fillStyle = "rgb(255, 0, 0)"; 
     ctx.fill(); 
     ctx.strokeStyle = "black"; 
     ctx.stroke(); 
    } 
    </script> 

Answer 1

Вам просто нужно сделать несколько изменений, и это будет работать.

Во-первых, вы должны изменить функцию draw() так, чтобы она принимала 2 параметра, а именно позицию X и Y, на которую будет нарисован рисунок. Затем вам нужно изменить жестко заданные значения, которые вы используете, чтобы они были основаны на переданных значениях X и Y.

Во-вторых, вы должны добавить обработчик onclick к холсту. Когда вы получаете событие click, вы можете получить координаты X и Y холста, на которые была нажата мышь.

Вы можете очистить холст и вызвать обновленную функцию отрисовки с щелчком мыши X и Y.

просмотровых OnClick обработчик для способа получения позиции мыши при нажатии на кнопке. Вам нужно будет использовать addEventListener для присоединения обработчика кликов, чтобы ваша функция получала событие, которое вызвало его передачу. Затем вы можете извлечь координаты щелчка из объекта события.