我遇到了以下使用 javascript 拖动正方形的非常简单的代码。它绘制在 html5 Canvas 上。尽管非常简单，但它确实暴露了我相当古怪的 javascript 知识中的一些空白。我通常同意拖放的想法(即开始拖动鼠标点击，停止拖动鼠标释放)但我的问题如下:
(1) 我看不到变量 e 在哪里定义，但它一直在使用。
(2) 在底部的初始化函数中，一个 onmousedown 监听器似乎附加到 Canvas 上。然而它等于函数 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>
最佳答案
你真的应该先学习js语言的基础。
1) e 是传递给函数的参数。回调接收一个参数:事件对象。所以 e 代表事件。
2) myDown 在附加到 onmousedown 监听器时不应执行。
每次用户在 Canvas 上单击时都会调用函数对象。是回调。
关于javascript - 在 Canvas 上拖放 - 几个与函数相关的查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4237657/