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