Question

所以我对编程很新，而且我一直在玩HTML 5和canvas。当我按下一个键时，我一直试图让一个简单的矩形移动，但我根本无法让我工作。我已按照本指南：http://www.homeandlearn.co.uk/JS/html5_canvas_keyboard_keys.html

这是我的代码： HTML： CanvasTest

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="TestStyle.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="TestApp.js"></script>
</head>

<body>

    <canvas id="canvas" width="400" height="500"></canvas>

</body>
</html>

JS：

var main = function (){

    var canvas = document.getElementById("canvas");
    canvas.addEventListener("keydown", doKeyDown, true);

    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(0, 0, 255, 1)"
    ctx.fillRect(20, 20, 20, 15);

    var x = 30;
    var y = 30;

    function doKeyDown(key) {
        alert (key.keyCode)

        if (key.keyCode == 87) { //w
            clearCanvas();
            y = y - 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 83) { //s
            clearCanvas();
            y = y + 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 65) { //a
            clearCanvas();
            y = x - 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
        if (key.keyCode == 68) { //d
            clearCanvas();
            y = x + 10;
            ctx.fillStyle = "rgba(0, 0, 255, 1)"
            ctx.fillRect(x, y, 20, 15)
        }
    }

    function clearCanvas() {
        canvas.width = canvas.width;
    }
};  

$(document).ready(main);

CSS：

canvas {
    border: 1px solid #ddd;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: 50px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 0;
    display: block;
}

当我加载它时，我得到画布并显示矩形，但我无法使用WASD移动矩形

Answer 1

在第二次评估时，我发现了一些错误

我做了一个粗略的移动示例（代码中最重要的更改）

http://jsfiddle.net/zfbukakc/2/

canvas = document.getElementById("canvas");
window.addEventListener("keydown", doKeyDown, true);
ctx = canvas.getContext("2d");
x = 30;
y = 30;

主要问题似乎是变量范围检查http://www.w3schools.com/js/js_scope.asp

稍后我会详细解释

Answer 2

我已发表评论，向您展示所做的更改。

我觉得我需要用很少的变化来解释，但我已经添加了评论以指出它们。

附加：自动对焦＆amp;焦点轮廓删除（参见源代码中的注释）

＆＃13;

var main = function (){
var canvas = document.getElementById("canvas");
canvas.addEventListener("keydown", doKeyDown, true);
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 255,.5)";
//_______________________________^ .5 = 50%/Half Alpha
ctx.fillRect(20, 20, 20, 15);
//----- Optional auto focus -------
//If you want the page to focus on your canva
canvas.focus();
var x = 30;
var y = 30;
function doKeyDown(key) {
if (key.keyCode == 87) { //w
   clearCanvas();
    y = y - 10;
    ctx.fillStyle = "rgba(0, 0, 255,.5)";
    ctx.fillRect(x, y, 20, 15);
}
if (key.keyCode == 83) { //s
    clearCanvas();
    y = y + 10;
    ctx.fillStyle = "rgba(0, 0, 255,.5)";
    ctx.fillRect(x, y, 20, 15);
}
if (key.keyCode == 65) { //a
    clearCanvas();
    x = x - 10; //Move Left -10 from x-axis
    ctx.fillStyle = "rgba(0, 0, 255,.5)";
    ctx.fillRect(x, y, 20, 15);
}
if (key.keyCode == 68) { //d
    clearCanvas();
    x = x + 10; //Move right +10 from x-axis
    ctx.fillStyle = "rgba(0, 0, 255,.5)";
    //__________________________________^ Close ;
    ctx.fillRect(x, y, 20, 15);
}
}
function clearCanvas() {
canvas.width = canvas.width;
}
};  

$(document).ready(main);

＆＃13;

canvas {
border: 1px solid #ddd;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
padding-top: 0;
display: block;
/*------ Remove outline on focus*/
/*outline: 0;*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" tabindex="0"></canvas>
 <!--_________________________________________^^^^^ Missing tabindex -->

＆＃13;

我希望这会有所帮助。快乐的编码！

HTML 5 canvas keydown事件动画

2 个答案: