キャンバスとJavaScriptを使用して描画を移動する方法は？

Question

右の矢印キーを押すたびにアニメーションを作成したいと思って作成したスティックフィギュアの図があります。私は文字通りオブジェクトを動かすことはできないが、イメージを消去して継続的に再描画できることを理解しています。しかし、私の実装はおそらくオフになります。どんな助けでも大歓迎です。

$(document).ready(function(e){ 

var canvas = document.getElementById("drawCanvas"), 
context = canvas.getContext('2d'), 
width = canvas.width, 
height = canvas.height, 
head = new Array(200, 200, 10,0, 2*Math.PI) , 
body = new Array(195, 210, 178, 250) , 
leftArm = new Array(192,215,200,230,210,230), 
rightArm = new Array(192,215,178 ,222,178,230), 
leftLeg = new Array(178, 250,190,260,185,275,192, 275), 
rightLeg= new Array(178, 250, 168, 260, 155, 262,153, 268 ) ; 


// board for game 
function board(){ 
context.fillStyle="#FFF"; 
context.fillStyle="#FFF"; 
context.fill(); 
context.strokeStyle="#000"; 
context.strokeRect(0,0,width,height); 
} 


//costume #1 
function costume1(){ 
context.beginPath(); 

//head 
context.arc(head[0], head[1], head[2],head[3], head[4]); 

//body 
context.moveTo(body[0],body[1]); 
context.lineTo(body[2],body[3]); 

//right arm 
context.moveTo(rightArm[0],rightArm[1]); 
context.lineTo(rightArm[2] ,rightArm[3]); 
context.lineTo(rightArm[4], rightArm[5]); 

//left arm 
context.moveTo(leftArm[0], leftArm[1]); 
context.lineTo(leftArm[2], leftArm[3]); 
context.lineTo(leftArm[4], leftArm[5]); 

//left leg 
context.moveTo(leftLeg[0], leftLeg[1]); 
context.lineTo(leftLeg[2],leftLeg[3]); 
context.lineTo(leftLeg[4] , leftLeg[5]); 
context.lineTo(leftLeg[6], leftLeg[7]); 


//right leg 
context.moveTo(rightLeg[0], rightLeg[1]); 
context.lineTo(rightLeg[2], rightLeg[3]); 
context.lineTo(rightLeg[4], rightLeg[5]); 
context.lineTo(rightLeg[6], rightLeg[7]); 
context.stroke(); 
} 


//costume #2 
function costume2(){ 
context.arc(head[0], head[1], head[2],head[3], head[4]); 

//body 
context.moveTo(body[0],body[1]); 
context.lineTo(body[2],body[3]); 

//right arm 
context.moveTo(rightArm[0],rightArm[1]); 
context.lineTo(rightArm[2] + 5 ,rightArm[3]); 
context.lineTo(rightArm[4] + 5 , rightArm[5]); 

//left arm 
context.moveTo(leftArm[0]  , leftArm[1]); 
context.lineTo(leftArm[2] - 5 , leftArm[3]); 
context.lineTo(leftArm[4] - 10, leftArm[5]); 

//left leg 
context.moveTo(leftLeg[0] , leftLeg[1]); 
context.lineTo(leftLeg[2] - 10 ,leftLeg[3]); 
context.lineTo(leftLeg[4] - 20, leftLeg[5]); 
context.lineTo(leftLeg[6] - 20, leftLeg[7]); 


//right leg 
context.moveTo(rightLeg[0],  rightLeg[1]); 
context.lineTo(rightLeg[2] + 15 , rightLeg[3]); 
context.lineTo(rightLeg[4] + 30 , rightLeg[5]); 
context.lineTo(rightLeg[6] +10, rightLeg[7]); 
context.stroke(); 
} 

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

var handle = true; 
board(); 
///move Character 
function check(e) { 
    var code = e.keyCode; 
    //Up arrow pressed 
    if (code == 39 && handle == true) { 
    clear(); 
    board(); 
    costume2(); 
    handle = false; 
     } 
    else if(code == 39 && handle == false) { 
    clear(); 
    board(); 
    costume1(); 
    handle = true; 
    } 


} 
window.addEventListener('keydown',check,false); 

}); 

Answer 1

canvas transformationsを使用してキャンバスにスティックマンを移動します。 （！）

は特に、context.translate(50,75)があなたのバッターのは50pxの右方向に移動し、重要なのは下向きと75pxます、あなたはあなたの棒人間の任意の座標変更する必要はありません - キャンバスはあなたのためにそれを完全に処理します。

変形はまた、あなたの棒人間の腕、脚などを明確にするのに役立ちます。 translate(rotationPointX, rotationPointY)とrotate(angle)の組み合わせを使用して、[rotationPointX, rotationPointY]にある関節を中心に四肢をangle回転させることができます。

棒人間を移動する例：

function drawStickman(changeInX,changeInY){ 
    context.clearRect(0,0,canvas.width,canvas.height); 
    context.translate(changeInX,changeInY); 
    // draw your stickman -- no change in coordinates are needed 
    context.translate(-changeInX,-changeInY); 
} 

Answer 2

画面を再描画するには、window.requestAnimationFrame（）を使用することをお勧めします。これにより、アニメーションのフレームごとに画面が段階的に再描画されます。例：

$(function(){ 
var context = document.getElementById('myCanvas').getContext('2d'); 
//initialize 
window.requestAnimationFrame(draw); 
function draw(){ 
    context.clearRect(0,0,800,600); // clear canvas 
    // draw the current frame 
    // animate the next frame 
    window.requestAnimationFrame(draw); 
}});