キャンバス内のアニメーションが機能しない

私のアニメーションには奇妙な問題があります。何があっても、私は何か動くことはできません。私は問題が何であるかを見るために簡単なコードを作っただけですが、私が得ているのは何もしない静的な正方形です。 Chrome、IE、Edgeで試してみましたが、すべて同じ結果が得られます。ここではJavaScriptのだキャンバス内のアニメーションが機能しない

<!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>

：ここではHTMLです

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);

任意のアイデア物事が動いていない理由は？

出典

2016-04-25 RazerB12

あなたは文字関数に 'X'と 'y'値を使用しないでください。したがって、常に固定値に描画されます。 'ctx.rect（x、y、50、50）;'は変化する値で描画します... – michaPau

[x、y]の位置を変更するのではなく、常に固定された場所[20,40]に描画します。

ここでリファクタリングのコード：

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>

出典

2016-04-25 18:12:08 markE

キャンバス内のアニメーションが機能しない

答えて

関連する問題