Drag and drop on the canvas - a couple of queries relating to functions_问答_开发者

Drag and drop on the canvas - a couple of queries relating to functions

开发者 https://www.devze.com 2023-01-25 23:11 出处：网络

相关专题：javascript

I came across the following very simple code for dragging a square around using javascript. It is drawn on the html5 canvas. Despite being very simple it has certainly exposed some gaps in my pretty flakey javascript knowledge. I am generally ok with the idea of drag and drop (i.e. start drag on mouse click, stop drag on mouse release) but my questions are as follows:

(1) I cannot see where the variable e is defined, yet it is used all the time.

(2) In the init funciton at the bottom, an onmousedown listener seems to be attached to the canvas. However it equals the function myDown, but myDown doesn't have parentheses after it. So the myDown function is not actually going to be exectuted. So what is it doing instead?

Thanks in advance. I have tried to research this myself but haven't had any success yet.

Matt

<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>
&开发者_Python百科lt;/body>
</html>

You should really learn basic of the js language first.

1) e is param that is passed to functions. Callbacks receives one param: event object. So e stands for event.

2) myDown is not suppose to be executed when it is attached to onmousedown listener. it is function object that is called everytime user clicks on canvas. It is callback.

e is the event variable which you get from onmousedown and onmouseup events. since you are attaching the mouse events with the canvas, so here e contains some information about mouse positions.
myDown is directly assigned to onmousedown which means that all the code of myDown function shall be assigned to onmousedown. If you add parenthesis after myDown then it would mean that you are assigning the response of myDown function to onmousedown event.

the other way of writing those events is like following

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

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

(1) I cannot see where the variable e is defined, yet it is used all the time.

You may know that a function is a set of instructions with input and output. They get their input through parameters and their output is what they return.

Now, the parameters they get are available in their body. This is why the e they get can be used inside.

(2) In the init funciton at the bottom, an onmousedown listener seems to be attached to the canvas. However it equals the function myDown, but myDown doesn't have parentheses after it. So the myDown function is not actually going to be exectuted. So what is it doing instead?

Function is a special object in javascript, with an extra internal property [[Call]]. When you type the function name alone, you're talking about the function itself. And as it is a first-class object it can be assigned to a variable, passed as an argument, returned from other functions, etc.

When you type the function name with parenthesize after it you execute the code in the function body by the [[Call]] internal property.