我正在尝试在画布元素中移动一个矩形,并且没有任何运气。到目前为止这是我的代码。我想用PURE JavaScript,而不是jQuery或任何其他库。
我的JavaScript:
window.onload = beginningMovement; // load beginning movement
function beginningMovement() {
var elem = document.getElementById("rectangle");
var pos = 0;
var id = setInterval(frame, 8);
function frame() {
if (pos == 203) {
clearInterval(id);
//Color funcs
setTimeout(black, 0);
setTimeout(lightgray, 500);
setTimeout(black, 1000);
setTimeout(lightgray, 1500);
setTimeout(black, 2000);
setTimeout(lightgray, 2500);
function black() {
var color = document.getElementById('container').style.backgroundColor = "black";
}
function lightgray() {
var color = document.getElementById('container').style.backgroundColor = "lightgray";
}
//End of color funcs
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.middle = pos + 'px';
}
}
}
//Arrow switching
var X = 40;
var Y = 20;
function switchKey(event) {
Key = event.keyCode;
myCanvas.fillstyle = "white";
myCanvas.filRect(X, Y, 50, 50);
}
switch(key) {
case 37: X -=5;
break;
case 37: Y -=5;
break;
case 37: X +=5;
break;
case 37: Y +=5;
}
myCanvas.fillstyle = "blue";
myCanvas.filRect(X, Y, 50, 50);
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
width: 450px;
height: 400px;
border: 5px solid black;
background: lightgray;
}
#rectangle {
height: 50px;
width: 150px;
background: cyan;
margin-left: 150px;
margin-top: 160px;
position: absolute;
}
</style>
</head>
<body onkeyup="switchKey(event)">
<div id="container">
<div id="rectangle">
</div>
</div>
</body>
</html>
我已经在这里工作了好几个小时,没有运气。如果有人可以帮助我,我会很感激,并尽快完成。
答案 0 :(得分:0)
您的代码存在很多问题,我最终认为重新制作一个简单的版本会让您更容易看到。如果您真的想坚持使用您的版本,请检查任何浏览器控制台是否有错误,您将看到我所看到的问题。有些功能尚不可用onload
,没有key
变量,但有一个Key
变量。关于变量和功能范围,还有其他问题。
以下是您要查看的新版本:http://codepen.io/antibland/pen/ONwEBE
这不是我最好的工作,但它是朝着正确方向迈出的一步。您应该使用setInterval
来重绘,而不是requestAnimationFrame
。它的表现要高得多(如果您有兴趣的话,请更多关于here)。
在我的演示中,使用了一个真正的<canvas>
元素。添加较小的矩形。我认为您打算使用真实的画布,因为您在代码中包含了myCanvas
变量。如果没有,请道歉。无论哪种方式,你可能都想在那里添加边界检查,以防止小矩形移动到墙外。