Animationen in Canvas funktionieren nicht

Ich habe ein seltsames Problem mit meinen Animationen. Egal was, ich kann nichts bewegen. Ich habe sogar einen einfachen Code erstellt, um zu sehen, was das Problem ist, aber alles, was ich bekomme, ist ein statisches Quadrat, das nichts tut. Ich habe es mit Chrome, IE und Edge versucht, und alle von ihnen geben das gleiche Ergebnis. Hier ist der HTML:Animationen in Canvas funktionieren nicht

<!DOCTYPE html> 
<html> 
    <head> 
     <title> K: The Potassium Struggle </title> 
    </head> 
    <body> 
     <canvas id="myCanvas" width="600" height="370"></canvas> 
     <script type="text/javascript" src="JavaScripts/one.js"></script> 
    </body> 
</html>

Hier ist das JavaScript:

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
var x = canvas.width/2; 
var y = canvas.height-30 
var dx = 2; 
var dy = -2; 

function character() { 
    ctx.beginPath(); 
    ctx.rect(20, 40, 50, 50); 
    ctx.fillStyle = "#912CEE"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0,0,canvas.width, canvas.height); 
    character(); 
    x += dx; 
    y += dy; 
} 

setInterval(draw, 10);

Irgendwelche Ideen, warum die Dinge bewegen sich nicht ??

Quelle

2016-04-25 RazerB12

Sie verwenden nicht die 'X' und 'Y' Werte in der Zeichenfunktion. Es bezieht sich also immer auf die festen Werte. 'ctx.rect (x, y, 50, 50);' wird es mit den sich ändernden Werten zeichnen ... – michaPau

Sie zeichnen Ihr Rect immer an einem festen Ort [20,40], anstatt [x, y] Ihren Rect neu positionieren zu lassen.

Hier ist Refactoring Code:

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var x = canvas.width/2; 
 
var y = canvas.height-60 
 
var dx = .1; 
 
var dy = -.1; 
 

 
function character() { 
 
    ctx.beginPath(); 
 
    // ctx.rect(20, 40, 50, 50); 
 
    ctx.rect(x,y, 50, 50); 
 
    ctx.fillStyle = "#912CEE"; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
} 
 

 
function draw() { 
 
    ctx.clearRect(0,0,canvas.width, canvas.height); 
 
    character(); 
 
    x += dx; 
 
    y += dy; 
 
} 
 

 
setInterval(draw, 10);

body{ background-color: ivory; } 
 
canvas{border:1px solid red; margin:0 auto; }

<canvas id="myCanvas" width=200 height=200></canvas>

Quelle

2016-04-25 18:12:08 markE

Animationen in Canvas funktionieren nicht

Antwort

Verwandte Themen