Question

我试过解决这个问题，我似乎找不到它的解决方案。几个小时后摆弄，我发现问题出在按钮标签或onclick属性中（纠正我，如果我错了）。

我的目标是通过按钮

移动白点

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function()
        {
            var canvas =        document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = 345;
            canvas.height = 410;
            canvas.style.border = "1px solid white";

            var left = document.getElementById("left");
            left.onclick = "playerLeft()";

            var x = Math.round(canvas.width/2);
            var y = Math.round(canvas.width/2);
            var rectWidth = 5, rectHeight = 5;
            var fps = 30, frames = 1000/fps;
            var colour = "white";
            var trailColour = "blue";

            ctx.fillStyle = colour;
            ctx.fillRect(x,y,rectWidth,rectHeight);

            function playerLeft() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x -= 6; 
                ctx.fillStyle = colour;;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerRight() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x += 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerUp() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y -= 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerDown() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y += 6;
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
        }
    </script>
</head>
<body style="background-color: black">
    <canvas id="canvas"></canvas>

    <div style="text-align: center; padding: 5px">
        <button id="left">Left</button>
        <button id="up">Up</button>
        <button id="down">Down</button>
        <button id="right">Right</button>
    </div>
</body>
</html>

Answer 1

不使用onxyz="..." - 样式事件处理程序的众多原因之一是，您从它们调用的任何函数都必须是全局。您的功能不属于window.onload回调本地。

相反，只需直接指定函数引用：

left.onclick = playerLeft;

Answer 2

只需调用不带括号的函数。

/etc/vold.fstab

属性onclick =“function（）”无法按预期运行？

2 个答案: