如何让我的绘图在HTML5画布中移动？

Question

I have a HTML5 canvas and Javascript. 我有一个HTML5画布和Javascript。 How can I make it move like move it's arms and feet? 如何让它像移动手臂和脚一样移动？

I tried Googling for some tutorials but failed. 我尝试使用谷歌搜索一些教程但失败了。

Attached here is my image and my codes: 附在这里是我的形象和我的代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="canvascss.css">
</head>

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

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

    context.beginPath();
    context.fillStyle = "black"; // #ffe4c4
    context.arc(200, 50, 30, 0, Math.PI * 2, true); // draw circle for head
    context.fill();

    context.beginPath();
    context.strokeStyle = "black"; // color
    context.lineWidth = 3;
    context.arc(200, 50, 20, 0, Math.PI, false); // draw semicircle for smiling
    context.stroke();

    // eyes
    context.beginPath();
    context.fillStyle = "black"; // color
    context.arc(190, 45, 3, 0, Math.PI * 2, true); // draw left eye
    context.fill();
    context.arc(210, 45, 3, 0, Math.PI * 2, true); // draw right eye
    context.fill();

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

    // arms
    context.beginPath();
    context.strokeStyle = "black"; // blue
    context.moveTo(200, 80);
    context.lineTo(150, 130);
    context.moveTo(200, 80);
    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>

</body>
</html>

Result: 结果：

在此输入图像描述

Answer 1

From HTML5 Canvas Animation with requestAnimFrame : 来自带有requestAnimFrame的HTML5 Canvas动画：

To create an animation using HTML5 Canvas, we can use the requestAnimFrame shim which enables the browser to determine the optimal FPS for our animation. 要使用HTML5 Canvas创建动画，我们可以使用requestAnimFrame垫片，它使浏览器能够确定动画的最佳FPS。 For each animation frame, we can update the elements on the canvas, clear the canvas, redraw the canvas, and then request another animation frame. 对于每个动画帧，我们可以更新画布上的元素，清除画布，重绘画布，然后请求另一个动画帧。

In short your point of departure is the following: 简而言之，您的出发点如下：

requestAnimationFrame

You will need a javascript function to CHANGE aspects of your starting image, and then to call that javascript code at regular intervals. 您将需要一个javascript函数来更改起始图像的各个方面，然后定期调用该javascript代码。

setInterval is another key word to google and learn from. setInterval是谷歌和学习的另一个关键词。

如何让我的绘图在HTML5画布中移动？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-21 07:16:55

如何让我的绘图在HTML5画布中移动？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-21 07:16:55

解决方案1
1 已采纳 2014-08-21 07:16:55