JavaScriptキャンバスの長方形のアニメーションが動作しない

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 

<script> 
function draw() { 
var ctx = document.getElementById("canvas1").getContext("2d"); 

// Rectangle position 
var posX = 5; 
var posY = 5; 
ctx.fillStyle = "white"; 
ctx.fillRect (posX, posY, 50, 50); 

document.addEventListener("keydown", function(event) { 
    var key_press = String.fromCharCode(event.keyCode); 
    if(key_press == "s") { 
     posY += 3; 
    } 
}) 
} 
window.onload = draw; 
</script> 
<style> 
#canvas1 { 
    background: #000000; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas1" width="1000" height="1000"></canvas> 
</body> 
</html>

これはなぜ動作していないのか教えてください。「s」をクリックするとposYの値を3増加します。私は長い間この問題を抱えていました。それはdraw（）と関係がありますか？関数？JavaScriptキャンバスの長方形のアニメーションが動作しない

私は非常にjavascriptでよくないので、私は本当にヒントもありがとうと思います。

出典

2016-06-27 Marcus Pro

変更後の図面を更新する必要があります。key_pressは、大文字のSではなく、sです。また、あなたはそれを試してみてくださいclearRect

デモhttps://jsfiddle.net/3hgwp24m/1/ [更新]

document.addEventListener("keydown", function(event) { 

    var key_press = String.fromCharCode(event.keyCode); 
    if(key_press == "S") {//uppercase S not s 
     posY += 3; 
     ctx.clearRect(0, 0, canvas.width, canvas.height);//clear canvas 
     ctx.fillRect (posX, posY, 50, 50); 
    } 
}) 
}

出典

2016-06-27 18:34:56

を呼び出すことにより、以前の描画をクリアする必要があります。

<html lang="en"> 
 
<head> 
 
    <style> 
 
     #canvas1 { 
 
    background: #000000; 
 
} 
 
</style> 
 
<meta charset="utf-8" /> 
 
<title></title> 
 

 
<script> 
 
var posX = 5; 
 
var posY = 5; 
 
function draw() { 
 
var ctx = document.getElementById("canvas1").getContext("2d"); 
 

 
// Rectangle position 
 
ctx.fillStyle = "white"; 
 
ctx.fillRect (posX, posY, 50, 50); 
 

 
} 
 
window.onload = draw; 
 
    window.addEventListener("keydown", function(event) { 
 
    var key_press = String.fromCharCode(event.keyCode); 
 
    if(key_press == "S") { 
 
     posY += 3; 
 
     draw(); 
 
    } 
 
}) 
 
</script> 
 
</head> 
 
<body> 
 
<canvas id="canvas1" width="1000" height="1000"></canvas> 
 
</body> 
 
</html>

出典

2016-06-27 18:39:00 Ehsan

JavaScriptキャンバスの長方形のアニメーションが動作しない

答えて

関連する問題