Javascript画布动画（人物运动） [英] Javascript Canvas Animation (Stick Figure Movement)

问题描述

我一直到处寻找一个展示动画的地方。我已经看到了可以将块移动到一个区域并向后，向上和向下旋转一圈的位置，但是对于移动他的身体的人物来说，什么也没有。我使用CSS动画，但想尝试JavaScript画布。这个人物可以在Canvas上做挥舞的动画吗？我假设需要setTimeout？

I have been looking everywhere for a place to show how to do animation. I have seen where you can move blocks to one area and back, a circle up and down, but nothing as to a figure moving his body. I use css animation, but wanted to try the javascript canvas. Is there any way this figure can do a waving animation on Canvas? I'm assuming that setTimeout will be needed?

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

推荐答案

首先，因为我们要绘制一遍又一遍的帧，我们需要将绘图代码放入 draw函数中。

First off, since we're going to be drawing a frame over and over we need to put the drawing code into a draw function.

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

There is a method on the Window object called requestAnimationFrame that will consistently call this draw function whenever it is available to. This prevents the window from using up all your memory and will pause the animation if you flip tabs while the animation is running. setTimeout and setInterval used to be utilized for this, but don't use them anymore.

由于发生的一切都是一致地调用 draw 函数，以便仅更改图形我们会定期设置一个变量（在本例中为 wave ），该变量确定手臂的绘制方式。

Since all that is happening is that the draw function is consistently called, in order to only change the drawing periodically we set a variable (in this case called wave) that determines how the arm is drawn.

时间戳记用于确定自从上次绘制以来，每过<$ c $，是否经过了900毫秒c> draw 被调用。如果还没有，我们将继续调用该函数，直到该持续时间过去为止。通常，我们希望它更快一些，但是由于我们以波浪为例，并且只有两个绘制状态（向上或向下），因此效果很好。

The timestamp is used to determine if 900 milliseconds have passed since the last drawing was made whenever draw is called. if it hasn't we keep calling the function until that duration has passed. Normally we would want this to be faster but since we're using a 'wave' as an example and we only have two drawing states( up or down ) it works fine.

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>

这篇关于Javascript画布动画（人物运动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！