如何讓我的繪圖在HTML5畫布中移動？

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>

結果：

在此輸入圖像描述

Answer 1

來自帶有requestAnimFrame的HTML5 Canvas動畫：

要使用HTML5 Canvas創建動畫，我們可以使用requestAnimFrame墊片，它使瀏覽器能夠確定動畫的最佳FPS。 對於每個動畫幀，我們可以更新畫布上的元素，清除畫布，重繪畫布，然后請求另一個動畫幀。

簡而言之，您的出發點如下：

requestAnimationFrame

您將需要一個javascript函數來更改起始圖像的各個方面，然后定期調用該javascript代碼。

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