如何使用 canvas 和 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

我建议您使用 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);
}});

Answer 2

使用 canvas transformations 在 canvas 周围移动你的火柴人。

特别是，context.translate(50,75) 会将你的火柴人向右移动 50 像素，向下移动 75 像素，重要的是 (!)，你不必更改任何火柴人坐标-- canvas 完全为您处理。

变形还将帮助您清晰表达火柴人的手臂、腿等。您可以结合使用 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);
}

如何使用 canvas 和 javascript 让绘图移动？

How to make drawing move using canvas and javascript?

javascript

drawing

html5-canvas