为什么我的物体拉长而不是移动？

我是新来的编码。而我是堆栈溢出的新手。如果我没有遵循用户在此处遵循的无数规则，请请粉饰我。为什么我的物体拉长而不是移动？

我正在尝试使用javasript代码在HTML5画布上移动对象。相反，它似乎在延长。我必须使用某种清晰的功能吗？当我这样做时，它似乎会让黑色方块（玩家）消失。

这是我的代码。任何建议/建议都会有帮助。

var c; 
 
var ctx; 
 
var playerPosX = 90; 
 
var playerPosY = 90; 
 

 
function init(){ 
 
    c = document.getElementById("c"); 
 
    ctx = c.getContext('2d'); 
 
    ctx.fillStyle = 'red'; 
 
    ctx.fillRect(0,0,200,200); 
 
    setInterval (player, 10); 
 
    } 
 

 

 
function player(){ 
 
    c=document.getElementById("c"); 
 
    ctx= c.getContext('2d'); 
 
    ctx.fillStyle='black'; 
 
    ctx.fillRect(playerPosX,playerPosY,20,20); 
 
} 
 

 
init(); 
 
function doKeyDown (evt){ 
 
    switch (evt.keyCode) { 
 
    case 40: 
 
     playerPosY=playerPosY+1; 
 
     break; 
 
    } 
 
} 
 

 
document.addEventListener('keydown', doKeyDown, true);

<canvas id="c" width="300" height="300"></canvas>

来源

2017-08-04 user8391116

规则很简单：https://stackoverflow.com/help/mcve – AGE

复制https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing – Jerinaw

是的，你要清楚是你的画布绘制球员之前。否则，新绘制的矩形将与旧矩形重叠，这看起来像是拉长了。

使用CanvasRenderingContext2D#clearRect清除画布：

const canvas = document.querySelector('canvas'); 
 
const ctx = canvas.getContext('2d'); 
 
let playerPosX = 90; 
 
let playerPosY = 90; 
 

 
function draw() { 
 
    window.requestAnimationFrame(draw); 
 

 
    // clear the canvas 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    
 
    // draw the background 
 
    ctx.fillStyle = 'red'; 
 
    ctx.fillRect(0, 0, 200, 200); 
 
    
 
    // draw the player 
 
    ctx.fillStyle = 'black'; 
 
    ctx.fillRect(playerPosX, playerPosY, 20, 20); 
 
} 
 

 
window.requestAnimationFrame(draw); 
 
document.addEventListener('keydown', e => e.key === 'ArrowDown' && playerPosY++);

<canvas width="300" height="300"></canvas>

正如你所看到的，我使用window.requestAnimationFrame重构你的代码有点，例如。

来源

2017-08-04 17:46:44 PeterMader

谢谢再次为您的友善和快速反应。道歉，如果这篇文章是不恰当的...请让我知道我可以做什么，以避免被压倒投票。 – user8391116

我猜downvote的原因是你没有在你的问题中包含代码。如果你给我们一个简短的代码片段和一个特定的问题，帮助你更容易。这就是AGE和[mcve]的含义。但别担心，你会习惯的。 StackOverflow有严格的规则，但却是一个很棒的社区。首先，你可以阅读[问]并参加[旅游]。我希望我的回答能帮助你。 – PeterMader

为什么我的物体拉长而不是移动？

回答

相关问题