在HTML畫布上清除和重繪正方形的過程

我一直在研究一些HTML/Javascript代碼，並且我想要發生的主要事情是當您按下任何箭頭鍵時，我繪製的正方形移動那個方向。在HTML畫布上清除和重繪正方形的過程

我對我必須做的一般思路是當我點擊鍵時，它首先清除畫布，然後根據函數重新繪製不同的x和y值。

我試過了，但是會發生什麼，廣場就消失了，我不知道爲什麼。

我一直在試圖調試一段時間，如果有人有任何指針，我很想在這裏他們！

<!DOCTYPE html> 
    <html> 
    <head> 
    <title> HTML </title> 
    <style> 
     canvas { 
      border: 1px solid #000000; 
     } 
    </style> 
</head> 
<body> 
    <center> 
     <canvas width = "620" height = "620" id = "myCanvas" ></canvas> 
    </center> 
    <script src = "script.js" > </script> 
</body> 
</html>

這是JavaScript代碼（對不起，不能很好地格式化，仍然得到的StackOverflow的格式代碼掛起）

document.addEventListener('keydown', function(event) { 
if(event.keyCode == 37) 
    moveLeft(); 
if(event.keyCode == 39) 
    moveRight(); 
if(event.keyCode == 38) 
    moveUp(); 
if(event.keyCode == 40) 
    moveDown(); 
}); 

function moveLeft() { 
context.clearRect(0, 0, canvas.width, canvas.height); 

//Edit X and Y Values 

var newX, newY; 
newX = squareX + 1; 
newY = squareY; 

context.rect(newX, newY, squareSizeX, squareSizeY); 
context.fill(newX, newY, squareSizeX, squareSizeY); 
} 

function moveRight() {/* Needs to be Finished */} 

function moveUp() {/* Needs to be Finished */} 

function moveDown() {/* Needs to be Finished */} 



var canvas; 
var context; 

var squareX, squareY; 

var squareSizeX = 75; 
var squareSizeY = 75; 

function renderToCanvas() { 
    var didRender = false; 

try { 
    canvas = document.getElementById("myCanvas"); 
    context = canvas.getContext("2d"); 
    /* INPUT DRAWING HERE */ 

    //Drawing Square 

    squareX = canvas.width/2; 
    squareY = canvas.height/2; 

    context.rect(squareX, squareY, squareSizeX, squareSizeY); 
    context.fillRect(squareX, squareY, squareSizeX, squareSizeY); 
    context.stroke(); 

    /* END DRAWING HERE */ 

    didRender = true; 
    console.log("Rendered Drawing: " + didRender); 
} 

catch(err) { 
    console.log("Rendered Drawing: " + didRender); 
    console.log(err.message); 
    } 
} 


renderToCanvas();

來源

2017-01-01 Xerxes Delio

在你moveLeft，而不是這個

context.rect(newX, newY, squareSizeX, squareSizeY); 
context.fill(newX, newY, squareSizeX, squareSizeY);

待辦事項這

context.fillRect(newX, newY, squareSizeX, squareSizeY);

Check out the docs for Canvas Context

您只使用context.rect()或context.fill()當您使用context.beginPath()

來源

2017-01-01 21:01:03 Dummy

它的工作路徑上的工作。但是，我遇到了另一個問題。每當我再次向左按，它不會再運行？你認爲這是行動/關鍵聽衆的問題嗎？ –

這是因爲你沒有相應地更新x座標，它仍然在運行，但新的x沒有更新，所以它看起來像只是保持靜止 – Dummy

是的，我只是發現它仍在運行，謝謝！ –

在HTML畫布上清除和重繪正方形的過程

回答

相關問題