HTML5/Javascript - 如何獲取畫布上形狀/圖像的座標？

說我畫了一個矩形。當然有一些內置的方法來獲得XY座標，以及該矩形的尺寸？但一些谷歌搜索後，我什麼都沒有提出。只是爲了澄清，我不是在談論畫布元素本身的座標，而是在畫布上畫出的形狀/圖像。HTML5/Javascript - 如何獲取畫布上形狀/圖像的座標？

任何幫助表示讚賞。

來源

2013-01-19 EpicPineapple

在這種情況下，有** **方式獲得座標？只是告訴我，我認爲這樣做的方式不存在並不是特別有幫助 – EpicPineapple

當你繪製矩形時，你必須知道座標嗎？只需將其保存在變量或屬性中即可。 –

如果您正在討論2D畫布繪圖，那麼繪圖將與屏幕座標1：1進行映射，因此它只是位置<canvas> +繪圖的位置。

爲了說明起見，在<canvas>上繪製基本上只是改變畫布的像素 - 繪製之後，不能像引用html元素一樣引用繪製的對象。

來源

2013-01-19 01:06:01

所以，如果我有一個畫布，其座標是X：10，Y：10，並且該畫布中的座標是X：20，Y：20。這是否意味着矩形的座標將在X：30，Y：30？ – EpicPineapple

@TehEpicPineapple是的，正好 –

我真正要問的是，如果我想獲得一個形狀座標並說，將其存儲在一個變量中，可以這樣做嗎？我會用這個用於像玩家/ AI /等的座標可能不同的遊戲。 – EpicPineapple

Canvas是數字（=像素=顏色）的二維表（陣列）。繪製到畫布中時，您只需編輯此表格。當你繪製畫布時（=改變表格中的數字），調整的座標應該是什麼？

如果你只繪製矩形，你可以定義座標爲您的矩形，你必須知道你的座標的程序中，因爲你剛纔所描繪它。

如果你希望你的圖像分成幾份「對象」（形狀），你應該使用SVG。

來源

2013-01-19 01:09:18

我在遊戲編程/動畫（我可能應該澄清）的背景下詢問這個問題，所以你並不總是知道某物的座標在哪裏。 – EpicPineapple

基本上，你應該用帆布爲圖形輸出到屏幕的手段，你的邏輯的其餘部分則直接進入的JavaScript權力遊戲/應用。最好的方法是創建對象併爲其分配屬性;以最簡單的形式，可以是這樣的：

function Player(x, y) 
{ 
    this.x = x; 
    this.y = y; 
} 

var examplePlayerObject = new Player(20, 20);

通過藉助原型您可以創建具有完全相同的功能的對象的多個副本擴展這個對象;如抽獎。在這個例子中繪製播放器可能只是一個20px * 20px的紅色正方形。

Player.prototype.draw = function() 
{ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.fillStyle = 'red'; 
    context.fillRect(this.x, this.y, 20, 20); 
}

然後，您應該有一個更新步驟，用一些方法清除屏幕上的內容並重新繪製已更改的零件。

function animationStep() 
{ 
    examplePlayerObject.x++; 
    examplePlayerObject.y++; 
    examplePlayerObject.draw(); 
}

這個動畫步驟應該運行每一幀;查看requestAnimationFrame以獲得流暢的動畫。舊版瀏覽器爲Paul Irish has a good shim。在該功能的末尾添加requestAnimationFrame(animationStep)，您將有一個紅色的正方形在屏幕上緩慢移動。祝你好運！

來源

2013-01-19 02:05:37 Ben

HTML5/Javascript - 如何獲取畫布上形狀/圖像的座標？

回答

相關問題