Javascript Canvas 动画(简笔画运动)

Question

我一直在到处寻找展示如何制作动画的地方。我见过你可以将 block 移动到一个区域并返回，上下移动一个圆圈，但对于一个移动他的 body 的人物来说什么都没有。我使用 css 动画，但想尝试 javascript Canvas 。这个人物有什么办法可以在 Canvas 上做挥手动画吗？我假设需要 setTimeout？

<canvas id="canvas" width="400px" height="400px" >
Your browser does not support HTML5 Canvas element
</canvas>

<script>
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object

context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200.width, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle  

context.beginPath(); 
context.lineWidth = 6;
context.stroke();

//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();

//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
context.moveTo(200, 100);
context.lineTo(250, 130);
context.stroke();

//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
</script>     

Answer 1

首先，因为我们要反复绘制一个框架，所以我们需要将绘图代码放入绘图函数。

Window 对象上有一个名为 requestAnimationFrame 的方法，它会在可用时始终调用此 draw 函数。这可以防止窗口耗尽所有内存，并且如果您在动画运行时翻转选项卡将暂停动画。 setTimeout 和 setInterval 曾经用于此目的，但不要再使用它们。

由于所有发生的事情都是 draw 函数被一致调用，为了仅定期更改绘图，我们设置了一个变量(在本例中称为 wave)这决定了 ARM 的绘制方式。

无论何时调用draw，时间戳 都用于确定自上次绘制以来是否已过去900 毫秒。如果没有，我们将继续调用该函数，直到该持续时间过去。通常我们希望它更快，但由于我们使用“波浪”作为示例并且我们只有两个绘图状态(向上或向下)，所以它工作正常。

let timestamp = Date.now();
let wave = false;


draw();

var canvas = document.getElementById("canvas");
context = canvas.getContext("2d"); // get Canvas Context object
let timestamp = Date.now();
let wave = false;


draw();

function draw() {
if(Date.now() < (timestamp+900)) return requestAnimationFrame(draw);

context.clearRect(0, 0, window.innerWidth, window.innerHeight);
context.beginPath();
context.fillStyle = "black"; // #000000
context.arc(200, 50, 30, 0, Math.PI * 2, true);
context.fill(); //fill the circle  

context.beginPath(); 
context.lineWidth = 6;
context.stroke();

//body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "black";
context.stroke();

//arms
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 100);
context.lineTo(150, 130);
if(wave) { 
context.moveTo(200, 100);
context.lineTo(250, 130);
wave = false;
}
else {
context.moveTo(200, 100);
context.lineTo(250, 70);
wave = true;
}
context.stroke();

//legs
context.beginPath();
context.strokeStyle = "black";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
timestamp = Date.now();
requestAnimationFrame(draw);
}

<canvas id="canvas" width="400px" height="400px" >
Your browser does not support HTML5 Canvas element
</canvas>