我创建了一个程序，可以使用 w、a、s 和 d 键在 Canvas 中上下左右移动矩形 block 。设置变量来表示 Canvas 的宽度时出错。这行代码出现错误:
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>
最佳答案
您应该使用 window.onload 函数来确保在尝试访问任何 DOM 对象之前加载 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();
}
关于javascript - 未捕获的类型错误 : Cannot read property 'width' of undefined in JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34940248/