單擊時如何移動畫布圖形？

Question

我在畫布上一個五邊形的身影，我想將它移動到鼠標位於一個點擊的地方。

CODE

<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

你只需要做一些修改，這會工作。

首先，你應該這樣，它需要兩個參數，即X和Y位置，該數字將在繪製改變你的draw（）函數。接下來，你需要改變你使用硬編碼值，以使它們都是基於X和Y值被通過。

其次，你應該添加一個onclick處理程序在畫布上。當您收到一個click事件，你可以得到的X和鼠標點擊的畫布Y的COORDS。

然後，您可以清除畫布，並用鼠標點擊X和Y

查找onclick處理的按鈕被按下時獲得鼠標的位置順路更新的繪製函數。你將不得不使用的addEventListener附上點擊處理程序，讓您的功能得到觸發它傳遞給它的事件。然後，您可以從事件對象中提取點擊的共同點。