Question

我想为我的Web应用程序创建一个加载栏，我想为此使用html画布。这是我用来填充画布的脚本：

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

我在一个在线代码转换器（khan academy）上测试了这个代码并且它工作了（当然没有前两行和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对象的上下文），然后为其分配函数。这就是全部 - 只有定义行为。

你还需要执行（一个旁注：在实际创建画布后执行它 - 当你将代码放入script时在canvas标签后标记 - 它已经足够了，你已经完成了它。）

执行功能使用：

draw();

或者根本不打包函数（除非它被多次调用）。

或者使用语法构造来执行就地创建的函数，如下所示：

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

＆＃13;

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);
    }
})();

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：我一直在考虑你可能需要什么，因为它并不完全是你想要的。我创建了this 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;
    }

如果不是：

你所做的是单独使用fill和rect。您需要设置颜色，然后使用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 个答案: