forループを使ってキャンバス内の矩形の位置を移動する方法

Question

まず、私はキャンバスを初めて使っています。私はこれを2日間抱き締めようとしています。本当に助けに感謝します。私の目標は緑色の矩形を一度に1ピクセルずつ上向きにアニメーション化することです（量は今のところ問題ありません）が、結局赤色のものに対しても同じことをしたいと考えています。私はあなたが私の希望の開始位置で四角形を見ることができますforループに注釈をつけることができますが、キャンバスに戻ってforループを追加すると理論的に私は上向きに移動する緑色の矩形を望んでいるとき空白です。 （または、下向きに、実際には関係ありません）。

$(document).ready(function() { 
 
    var canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    cw = canvas.width, 
 
    ch = canvas.height; 
 

 

 
    function rectangles() { 
 

 
    var y = 0; 
 
    // Starting point rectangles 
 
    ctx.save(); 
 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "#006847"; 
 
    ctx.fillRect(0, 0, 200, 450); 
 
    ctx.closePath(); 
 

 
    ctx.beginPath(); 
 
    ctx.fillStyle = "#CE1126"; 
 
    ctx.fillRect(400, 0, 200, 450); 
 
    ctx.closePath(); 
 

 
    ctx.save(); 
 
    /*for (i = 0; i < 450; i++) { 
 
     y = y + 1; 
 
     ctx.beginPath(); 
 
     ctx.fillRect(0, y, 200, 450); 
 
     ctx.closePath(); 
 
     ctx.clearRect(0, 0, cw, ch); 
 
    }*/ 
 
    } 
 

 
    setInterval(rectangles, 2000); 
 
});

CSS : #canvas { 
 
    border: 3px #000 solid; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="canvas-container"> 
 
    <canvas id="canvas" height="450" width="600"></canvas> 
 
</div>

Answer 1

forループの必要はありません。これは、ifステートメントだけを使用して実行できます。

$(document).ready(function() { 
 
    var canvas = document.getElementById("canvas"), 
 
     ctx = canvas.getContext("2d"), 
 
     cw = canvas.width, 
 
     ch = canvas.height, 
 
     GY = 0, 
 
     RY = 0; 
 

 
    rectangles(); 
 

 
    function rectangles() { 
 
     if (GY > -450 && RY > -450) { 
 
      GY -= 1; // pixel 
 
      RY -= 1; 
 
     } else if (GY == -450 && RY == -450) { 
 
      GY = 450; 
 
      RY = 450; 
 
     } 
 
     // Starting point rectangles 
 
     ctx.clearRect(0, 0, cw, ch); 
 
     // green 
 
     ctx.fillStyle = "#006847"; 
 
     ctx.fillRect(0, GY, 200, 450); 
 
     // red 
 
     ctx.fillStyle = "#CE1126"; 
 
     ctx.fillRect(400, RY, 200, 450); 
 
     requestAnimationFrame(rectangles); 
 
    } 
 
});

#canvas { 
 
    border: 3px #000 solid; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="canvas-container"> 
 
    <canvas id="canvas" height="450" width="600"></canvas> 
 
</div>

Answer 2

短い答えは：あなたがすることはできません。

理由は次のとおりです。ブラウザがレンダリングコンテキストに戻るため、スクリプトの実行が終了するまでブラウザは何も表示しません。

使用​​：https://developer.mozilla.org/de/docs/Web/API/window/requestAnimationFrame

$(document).ready(function() { 
    var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    cw = canvas.width, 
    ch = canvas.height; 

    var y = 0; 

    function rectangles() { 

    // Starting point rectangles 
    ctx.save(); 
    ctx.clearRect(0, 0, cw, ch); 
    ctx.beginPath(); 
    ctx.fillStyle = "#006847"; 
    ctx.fillRect(0, 0, 200, 450); 
    ctx.closePath(); 

    ctx.beginPath(); 
    ctx.fillStyle = "#CE1126"; 
    ctx.fillRect(400, 0, 200, 450); 
    ctx.closePath(); 

    ctx.save(); 
    y++; 

    ctx.beginPath(); 
    ctx.fillRect(0, y, 200, 450); 
    ctx.closePath(); 
    ctx.clearRect(0, 0, cw, ch); 
    if (y < 450) 
     requestAnimationFrame(rectangles); 
    } 


    setInterval(rectangles, 2000); 
}); 

Answer 3

編集：HERE

ための関数長方形（）で空白になるのキャンバスを、ループの位置を計算して描画します：サイアムは、この後にはるかに良い答えをしました矩形が点滅し、アニメーションを見る前に最終状態（空白）が表示されます。

新しい矩形を描画するたびに、時間を置いています。また、長方形の新しい位置を計算するために、どれくらいの時間が経過したかを記録するインデックスiを追加しました。スニペットとコメントを確認し、必要があるかどうか確認してください。

$(document).ready(function() { 
 
    var canvas = document.getElementById("canvas"), 
 
     ctx = canvas.getContext("2d"), 
 
     cw = canvas.width, 
 
     ch = canvas.height; 
 
     step = 1; // Distance the rectangle move each time 
 
     refresh = 10; // Repaint interval 
 
     var i = 0; // Record how far has the rectangle go 
 

 
    function rectangles() { 
 
     // Starting point rectangles 
 
     ctx.save(); 
 
     ctx.clearRect(0, 0, cw, ch); 
 
     ctx.beginPath(); 
 
     ctx.fillStyle = "#006847"; 
 
     // Leave blank area with height: i*step 
 
     ctx.fillRect(0, 0, 100, ch-i*step); 
 
     ctx.closePath(); 
 

 
     ctx.beginPath(); 
 
     ctx.fillStyle = "#CE1126"; 
 
     ctx.fillRect(200, 0, 100, ch-i*step); 
 
     ctx.closePath(); 
 

 
     ctx.save(); 
 
     i ++; 
 
     // The canvas is blank, stop drawing 
 
     if (ch-i*step < 0) { 
 
      clearInterval(interval) 
 
     } 
 
    } 
 
    interval = setInterval(rectangles, refresh); 
 
    });

#canvas { 
 
    border: 3px #000 solid; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="canvas-container"> 
 
    <canvas id="canvas" height="225" width="300"></canvas> 
 
</div>

Answer 4

キャンバスは、単一のエンティティであるので、あなたが達成できなかった理由があります。キャンバスをクリアするまで、四角形を移動することはできません。 clearRectは救助のためにここにあります。

clearCanvasという関数で作成しました。それはキャンバスを実行しクリアして長方形を再配置します。したがって、新しく計算された位置で2秒ごとにキャンバスを再描画しています。

$(document).ready(function() { 
 
    var canvas = document.getElementById("canvas"), 
 
    ctx = canvas.getContext("2d"), 
 
    cw = canvas.width, 
 
    ch = canvas.height; 
 

 
    var x = 100; 
 
    var y = 100; 
 

 
    function rectangles() { 
 
    clearCanvas(); 
 
    var y = 0; 
 
    // Starting point rectangles 
 
    ctx.save(); 
 
    ctx.clearRect(0, 0, cw, ch); 
 
    ctx.beginPath(); 
 
    ctx.fillStyle = "#006847"; 
 
    ctx.fillRect(x, 0, 50, 50); 
 
    ctx.closePath(); 
 

 
    ctx.beginPath(); 
 
    ctx.fillStyle = "#CE1126"; 
 
    ctx.fillRect(x + 400, 0, 50, 50); 
 
    ctx.closePath(); 
 

 
    ctx.save(); 
 

 

 
    if (x < 10) { 
 
     x = 100; 
 
    } 
 
    x = x - 10; 
 

 
    } 
 

 
    setInterval(rectangles, 400); 
 

 
    function clearCanvas() { 
 
    ctx.clearRect(0, 0, cw, ch); 
 
    } 
 

 
});

#canvas { 
 
    border: 3px #000 solid; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="canvas-container"> 
 
    <canvas id="canvas" height="450" width="600"></canvas> 
 
</div>