我已经创建了一个程序,可以使用w、a、s和d键在画布内上下左右移动矩形块。将变量设置为表示画布宽度时出错。这行代码出现错误:
var cw=canvas.width;
我一直试图在Chrome上使用这个代码。下面是完整的代码:
<html>
<head>
<script>
var positionX=0;
var positionY=0;
var cw=canvas.width;
var ch=canvas.height;
var canvas=document.getElementById("canvas1");
window.addEventListener("keydown", onKeyPress, true);
function draw(){
var canvas=document.getElementById("canvas1");
var cw=canvas1.width;
var ch=canvas1.height;
var context=canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle="green";
context.fillRect(positionX, positionY, 100, 100);
context.strokeStyle = 'black';
context.stroke();
}
function onKeyPress(e){
if (e.keyCode==87){
positionY=Math.max(0,positionY-15);
}
if (e.keyCode==83){
positionY=Math.min(cw-500,positionY+15);
}
if (e.keyCode==68){
positionX=Math.min(ch-500,positionX+50);
}
if (e.keyCode==65){
positionX=Math.max(0,positionX-50);
}
draw();
}
</script>
</head>
<body>
<div id="firstDiv">
<canvas id="canvas1" width="500" height="500" style="border: 1px solid black;"> </canvas>
</div>
</body>
</html>
最佳答案
这里有一个working live demo
在尝试访问任何DOM对象之前,应该使用window.onload
函数确保加载HTML。这在语法上使JavaScript与HTML分离。
var positionX = 0;
var positionY = 0;
var canvas = {};
var cw = 0;
var ch = 0;
var bw = 100;
var bh = 100;
// Set up initial values, after the page loads
window.onload = function(){
positionX = 0;
positionY = 0;
canvas = document.getElementById("canvas");
cw = canvas.width;
ch = canvas.height;
draw();
};
// Add keyboard listener
window.addEventListener("keydown", onKeyPress, true);
function draw(){
canvas=document.getElementById("canvas");
cw=canvas.width;
ch=canvas.height;
context=canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle="green";
context.fillRect(positionX, positionY, bw, bh);
context.strokeStyle = 'black';
context.stroke();
}
function onKeyPress(e){
var dx = 50;
var dy = 15;
if (e.keyCode == 87){
console.log("w(87) up");
positionY=Math.max(0,positionY-dy);
}
else if (e.keyCode == 83){
console.log("s(83) down");
positionY = Math.min((positionY+dy), (ch-bh));
}
else if (e.keyCode == 68){
console.log("d(68) right");
positionX = Math.min((positionX+dx), (cw-bw));
}
else if (e.keyCode == 65){
console.log("a(65) left");
positionX=Math.max(0,positionX-dx);
}
draw();
}