Javascript画布动画

Javascript canvas animating

本文关键字：动画 布动画 Javascript      更新时间：2023-09-26

我想为我的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）上测试了这个代码，它成功了（当然没有前2行和大多数东西前面的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>

无论你想画什么。。。这个：

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

它是全局上下文（window对象的上下文）中变量的定义，然后为其分配一个函数。仅此而已，它仅定义行为。

您还需要执行（旁注：在画布实际创建后执行它——当您将代码放在画布标记后的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。也许这会有任何帮助。

嗯。。。

你把一些事情搞混了。试试这个：

<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。固定答案。

祝你好运！

您需要为每个动画步骤调用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>
相关文章：