Javascript 如何从阵列存储访问JS函数？
我正在使用html5画布中的自定义“按钮”。因为我有这么多按钮，所以我认为存储在数组中更有意义。我的困境是，我不太确定如何实现“附加”到特定按钮的自定义功能。我看到了，不确定这是否适用于这里 显然Javascript 如何从阵列存储访问JS函数？,javascript,arrays,function,html5-canvas,Javascript,Arrays,Function,Html5 Canvas,我正在使用html5画布中的自定义“按钮”。因为我有这么多按钮，所以我认为存储在数组中更有意义。我的困境是，我不太确定如何实现“附加”到特定按钮的自定义功能。我看到了，不确定这是否适用于这里 显然btn[i].函数+“（）”并没有削减它 如何在按钮数组中存储自定义函数，并在鼠标单击时成功调用它 代码如下： <!doctype html> <html> <head> <script type="text/javascript" src="http
btn[i].函数+“（）”并没有削减它
如何在按钮数组中存储自定义函数，并在鼠标单击时成功调用它
代码如下：
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body {background-color: black; margin: 8px; }
#canvas {border: 1px solid gray;}
</style>
<script>
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var cw = canvas.width;
var ch = canvas.height;
var btn = [{
x: 50,
y: 100,
width: 80,
height: 50,
display: "Hello There",
function: "functionA" // Is this right?
}, {
x: 150,
y: 100,
width: 80,
height: 50,
display: "Why Not?",
function: "functionB" // Is this right?
}, {
x: 250,
y: 100,
width: 80,
height: 50,
display: "Let's Go!",
function: "functionC" // Is this right?
}];
function drawAll() {
ctx.clearRect(0, 0, cw, ch);
for (var i = 0; i < btn.length; i++) {
drawButton(ctx, btn[i].x, btn[i].y, btn[i].width, btn[i].height, btn[i].display);
}
}
drawAll();
// listen for mouse events
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
function handleMouseDown(e) {
// tell the browser we'll handle this event
e.preventDefault();
e.stopPropagation();
// save the mouse position
lastX = parseInt(e.clientX - offsetX);
lastY = parseInt(e.clientY - offsetY);
// hit all existing buttons
for (var i = 0; i < btn.length; i++) {
if ((lastX < (btn[i].x + btn[i].width)) &&
(lastX > btn[i].x) &&
(lastY < (btn[i].y + btn[i].height)) &&
(lastY > btn[i].y)) {
// execute button function
btn[i].function+"()"; // obviously this is just wrong.
console.log("Button #" + (i + 1) + " has been clicked!!" );
}
}
}
function drawButton(context, x, y, width, height, text) {
var myGradient = context.createLinearGradient(0, y, 0, y + height);
myGradient.addColorStop(0, '#999999');
myGradient.addColorStop(1, '#222222');
context.fillStyle = myGradient;
context.fillRect(x, y, width, height);
context.fillStyle = 'white';
// textAlign aligns text horizontally relative to placement
context.textAlign = 'center';
// textBaseline aligns text vertically relative to font style
context.textBaseline = 'middle';
context.font = 'bold 15px sans-serif';
context.fillText(text, x + width / 2, y + height / 2);
}
function functionA() {
alert("Yipee Function A!");
}
function functionB() {
alert("Yowza, it's Function B!");
}
function functionC() {
alert("Now showing Function C!");
}
})
</script>
</head>
<body>
<canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
正文{背景色：黑色；边距：8px；}
#画布{边框：1px纯灰；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
var cw=画布宽度；
var ch=画布高度；
var btn=[{
x:50，
y:100，
宽度：80，
身高：50，
显示：“你好”，
功能：“功能”//是否正确？
}, {
x:150，
y:100，
宽度：80，
身高：50，
显示：“为什么不？”，
功能：“功能B”//是否正确？
}, {
x:250，
y:100，
宽度：80，
身高：50，
展示：“我们走！”，
功能：“功能C”//是否正确？
}];
函数drawAll（）{
ctx.clearRect（0，0，cw，ch）；
对于（变量i=0；ibtn[i].x）&&
（最后<（btn[i].y+btn[i].高度）&&
（lastY>btn[i].y））{
//执行按钮功能
btn[i].函数+“（）”；//显然这是错误的。
log（“按钮#“+（i+1）+”已被单击！！”；
}
}
}
函数drawButton（上下文、x、y、宽度、高度、文本）{
var myGradient=context.createLinearGradient（0，y，0，y+height）；
myGradient.addColorStop（0，#999999'）；
myGradient.addColorStop（1，#22222'）；
context.fillStyle=myGradient；
fillRect（x，y，宽度，高度）；
context.fillStyle='white'；
//textAlign相对于放置水平对齐文本
context.textAlign='center'；
//文本基线相对于字体样式垂直对齐文本
context.textb基线='middle'；
context.font='bold 15px sans serif'；
填充文本（文本，x+宽度/2，y+高度/2）；
}
函数functionA（）{
警报（“Yipee函数A！”）；
}
函数B（）{
警报（“Yowza，这是功能B！”）；
}
函数c（）{
警报（“现在显示函数C！”）；
}
})
您可以在数组中存储对函数的引用，只需丢失其名称周围的“
符号（当前使其成为字符串而不是函数引用），即可创建如下数组：
var btn = [{
x: 50,
y: 100,
width: 80,
height: 50,
display: "Hello There",
function: functionA
}, {
x: 150,
y: 100,
width: 80,
height: 50,
display: "Why Not?",
function: functionB
}]
然后，您可以通过编写btn[i].function（）调用函数（）
您可以在数组中存储对函数的引用，只需在其名称周围丢失“
符号（当前使其成为字符串而不是函数引用），即可创建如下数组：
var btn = [{
x: 50,
y: 100,
width: 80,
height: 50,
display: "Hello There",
function: functionA
}, {
x: 150,
y: 100,
width: 80,
height: 50,
display: "Why Not?",
function: functionB
}]
然后，您可以通过编写btn[i].function（）调用其中一个函数，尝试将按钮更改为：
{
display: "Hello There",
action: functionA
}
并援引：
btn[i].action();
我将名称function
更改为action
，因为function
是保留字，不能用作对象属性名称。尝试将按钮更改为：
{
display: "Hello There",
action: functionA
}
并援引：
btn[i].action();
我将名称function
更改为action
，因为function
是一个保留字，不能用作对象属性名称。不要将函数名称放在数组中，请对函数本身进行引用：
var btn = [{
x: 50,
y: 100,
width: 80,
height: 50,
display: "Hello There",
'function': functionA
}, {
x: 150,
y: 100,
width: 80,
height: 50,
display: "Why Not?",
'function': functionB
}, {
x: 250,
y: 100,
width: 80,
height: 50,
display: "Let's Go!",
'function': functionC
}];
要调用该函数，请执行以下操作：
btn[i]['function']();
我将函数
放在文本中的引号中，并使用数组符号来访问它，因为它是一个保留关键字 不要将函数名放在数组中，而是放一个对函数本身的引用：
var btn = [{
x: 50,
y: 100,
width: 80,
height: 50,
display: "Hello There",
'function': functionA
}, {
x: 150,
y: 100,
width: 80,
height: 50,
display: "Why Not?",
'function': functionB
}, {
x: 250,
y: 100,
width: 80,
height: 50,
display: "Let's Go!",
'function': functionC
}];
要调用该函数，请执行以下操作：
btn[i]['function']();
我将函数
放在文本中的引号中，并使用数组符号来访问它，因为它是一个保留关键字 它可以用作属性名称，但必须引用它。但我同意你为方便使用而重新命名它的决定。