Question

我有一个HTML5画布和Javascript。我怎样才能像移动它的手臂和脚一样移动它？

我尝试使用谷歌搜索一些教程但失败了。

这里附有我的图片和我的代码：

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

结果：

enter image description here

Answer 1

来自HTML5 Canvas Animation with requestAnimFrame：

要使用HTML5 Canvas创建动画，我们可以使用 requestAnimFrame shim，它使浏览器能够确定我们动画的最佳FPS。对于每个动画帧，我们都可以更新画布上的元素，清除画布，重绘画布，然后请求另一个动画帧。

简而言之，您的出发点如下：

requestAnimationFrame

您需要一个javascript函数来更改起始图像的各个方面，然后定期调用该javascript代码。

setInterval是谷歌和学习的另一个关键词。

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

1 个答案: