在畫布上拖放 - 一些與功能相關的查詢

我遇到了以下非常簡單的代碼，用於拖動使用javascript的正方形。它在html5畫布上繪製。儘管非常簡單，但它肯定會暴露我漂亮的JavaScript知識中的一些空白。我通常對拖放的想法（即開始拖動鼠標單擊，停止拖動鼠標釋放），但我的問題如下：在畫布上拖放 - 一些與功能相關的查詢

（1）我看不到變量e的定義，但它一直在使用。

（2）在底層的init函數中，onmousedown偵聽器似乎被附加到畫布上。但它等於函數myDown，但myDown後面沒有括號。所以myDown函數實際上並不會被執行。那麼它在做什麼呢？

在此先感謝。我試圖自己研究這個，但還沒有取得任何成功。

馬特

<html> 
<head> 
</head> 
<body> 
<section> 

<div> 
<canvas id="canvas" width="400" height="300"> 
</canvas> 
</div> 

<script type="text/javascript"> 

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var dx = 5; 
var dy = 3; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
ctx.beginPath(); 
ctx.rect(x,y,w,h); 
ctx.closePath(); 
ctx.fill(); 
} 

function clear() { 
ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
return setInterval(draw, 10); 
} 

function draw() { 
clear(); 
ctx.fillStyle = "#FAF7F8"; 
rect(0,0,WIDTH,HEIGHT); 
ctx.fillStyle = "#444444"; 
rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e){ 
if (dragok){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
} 
} 

function myDown(e){ 
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
e.pageY > y -15 + canvas.offsetTop){ 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    dragok = true; 
    canvas.onmousemove = myMove; 
} 
} 

function myUp(){ 
dragok = false; 
canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 

</script> 

</section> 
</body> 
</html>

來源

2010-11-21 Matt K

e是事件變量你從onmousedown和onmouseup事件得到。因爲您將鼠標事件與畫布連接起來，所以此處e包含有關鼠標位置的一些信息。
myDown被直接賦值爲onmousedown這意味着myDown函數的所有代碼都應該指定爲onmousedown。如果在myDown之後添加括號，則意味着您將myDown函數的響應分配給onmousedown事件。

寫這些事件的另一種方式是像下面

canvas.onmousedown = function(e) 
{ 
    myDown(e); 
}; 

canvas.onmouseup = function(e) 
{ 
    myUp(e); 
};

來源

2010-11-21 12:05:42

你真的應該學會基本的JS語言的第一次。

1）e是傳遞給函數的參數。回調接收一個參數：事件對象。所以e代表事件。

2）myDown在連接到onmousedown監聽器時不會被執行。它是每次用戶點擊畫布時調用的函數對象。這是回調。

來源

2010-11-21 12:07:29 petraszd

（1）我看不到變量e在哪裏定義，但它始終都在使用。

您可能知道函數是一組帶有輸入和輸出的指令。他們通過參數獲得他們的輸入，他們的輸出是他們返回的。

現在，他們得到的參數在其正文中可用。這就是爲什麼他們得到的e可以用在裏面。

（2）在底部初始化功能可按，一個onmousedown事件偵聽器似乎被附着到畫布上。但它等於函數myDown，但myDown後面沒有括號。所以myDown函數實際上並不會被執行。那麼它在做什麼呢？

功能是在JavaScript中的特殊object，有一個額外的內部屬性[[Call]]。當你單獨輸入函數名稱時，你正在討論函數本身。而且因爲它是一個first-class object它可以assigned一個變量，passed作爲參數，returned其他功能等

當你後圓括號鍵入函數名它，你execute功能體中的代碼由[[Call]]內部屬性組成。

來源

2010-11-21 12:30:42 galambalazs

在畫布上拖放 - 一些與功能相關的查詢

回答

相關問題