Javascript畫布動畫

Question

我想為我的Web應用程序制作一個加載欄，並且我想為此使用html canvas。 這是我用來填充畫布的腳本：

<script>
    var canvas = document.getElementById("bar");
    var c = canvas.getContext("2d");

    var xPos = 0;

    draw = function() {
        if(xPos < 300){
            c.rect(0, 0, xPos, 30);
            c.fill(255,0,0);
            xPos += 0.5;
        }
    };
</script>

我在在線代碼轉換器（可汗學院）上測試了此代碼，並且該代碼有效（當然，在大多數情況下沒有前兩行和c），這也是我的麻煩，我不知道該放在哪里C。 在...前面？

我簡化了頁面：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <canvas id="bar"></canvas>
        <script>
            var canvas = document.getElementById("bar");
            var c = canvas.getContext("2d");

            c.fillStyle = "#ff0000"

            draw = function(){
                if(xPos < 300){
                    c.fillRect(0, 0, xPos, 30);
                    xPos += 0.5;
                }
            };
        </script>
    </body>
</html>

Answer 1

無論您想畫什么...

draw = function(){
    if(xPos < 300) {
        c.fillRect(0, 0, xPos, 30);
        xPos += 0.5;
    }
};

...它是全局上下文（ window對象的上下文）中變量的定義，然后為其分配功能。 僅此而已-它僅定義行為。

您還需要執行該操作（一個旁注：在實際創建畫布之后執行該操作-將代碼放在canvas標簽之后的script標簽中-足夠並且您已經做到了）。

要執行該功能，請使用：

draw();

或者根本不將代碼包裝在函數中（除非被多次調用）。

或使用語法構造來執行就地創建的函數，如下所示：

(draw = function(){
    if(xPos < 300) {
        c.fillRect(0, 0, xPos, 30);
        xPos += 0.5;
        setTimeout(draw,15); // use this to achieve animation effect
    }
})();

 var xPos = 0; var canvas = document.getElementById("bar"); var c = canvas.getContext("2d"); c.fillStyle = "#FF0000"; var draw; (draw = function(){ if(xPos < 300) { c.fillRect(0, 0, xPos, 30); xPos += 0.5; setTimeout(draw,15); } })();

 #bar { width: 300px; height: 50px; }

 <canvas id="bar"></canvas>

編輯：我一直在想您可能需要什么，因為它並不完全是您想要的。 我已經創建了這個jsfiddle 。 也許會對您有幫助。

Answer 2

嗯...

你把一些事情弄混了。 嘗試這個：

<html>
<canvas id = "cvs1" width = "300" height = "30"></canvas>
</html>

對於腳本：

var c = document.getElementById("cvs1").getContext("2d");
c.fillStyle = "#ff0000" //Set Fill Color(Set to red)

    if(xPos < 300){
        c.fillRect(xPos, 0, 30, 30);
        xPos += 0.5;
    }

如果不：

您所做的是分別使用填充和校正。 您需要設置顏色，然后使用fillRect（）函數繪制矩形。

編輯：您得到x，y，寬度，高度作為寬度，高度，x，y。 固定答案。

祝好運！

Answer 3

您需要為每個動畫步驟調用draw 。 您可以使用setTimeout ， setInterval或requestAnimationFrame來做到這一點：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <canvas id="bar"></canvas>
        <script>
            var canvas = document.getElementById("bar");
            var c = canvas.getContext("2d");
            c.fillStyle = "#ff0000";
            xPos=0;
            draw = function(){
                if(xPos < 300){
                    c.fillRect(0, 0, xPos, 30);
                    xPos += 0.5;
                    requestAnimationFrame(draw);
                }
            };
            requestAnimationFrame(draw);
        </script>
    </body>
</html>

Javascript畫布動畫

問題描述

3 個解決方案

解決方案1
2 已采納 2014-10-26 20:22:14

解決方案2
0 2014-10-26 19:23:52

解決方案3
0 2014-10-26 20:37:04

Javascript畫布動畫

問題描述

3 個解決方案

解決方案1 2 已采納 2014-10-26 20:22:14

解決方案2 0 2014-10-26 19:23:52

解決方案3 0 2014-10-26 20:37:04

解決方案1
2 已采納 2014-10-26 20:22:14

解決方案2
0 2014-10-26 19:23:52

解決方案3
0 2014-10-26 20:37:04