将画布用于 Web 动画会导致任何操作

Using the Canvas for web animation results in nothing happening?

本文关键字：动画 操作 任何 Web 布用于 用于      更新时间：2023-09-26

我正在学习javascript，所以一个同事让我在浏览器中做基本的动画。 我刚刚完成了我的代码，使用 canvas 元素向屏幕显示图像，但在运行代码时没有任何反应。 我的调试语句不会打印到控制台，也不会出现任何错误。 任何人都可以看到我的代码有问题吗？

<html>
    <body>
        <canvas id="console" width="600" height="600"></canvas>
        <script type="text/javascript">
            (function() {
                console.log("at top of script");
                var ballImage = new Image();
                ballImage.src = "http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg";
                var time_stamp;
                var balls[];
                var BALL_COUNT = 2;
                function requestAnimFrame (cb) {
                    function fallback (cb){
                        window.setTimeout(cb, 10);
                    }                     
                    var func = window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        fallback;
                   func (cb);      
                }               

                function update() {
                    var ts = Date.now();
                    var time_elapsed = ts - (time_stamp || ts);
                    time_stamp = ts;
                    canvas = document.getElementById("canvas");
                    // update ball positions and detect wall collisions
                    balls.forEach(function (ball){
                        canvas.clearRect( ball.xLocation, ball.yLocation, ball.scaleWidth, ball.scaleHeight );
                        ball.update(time_elapsed);
                        canvas.drawImage( ball.image, ball.xLocation, ball.yLocation, ball.scaleWidth, ball.scaleHeight );
                    });
                }
                function programRun() {
                    update();
                    requestAnimationFrame(programRun);
                }

                /*
                    CLASS: ball
                 */
                 function Ball() {
                    // all the code and functions for the ball class....
                 }              

                ballImage.onload = function() {
                    // fill up the array containing the ball objects
                    for (var i = 0; i < BALL_COUNT; ++i){
                        balls.push (new Ball ("ball" + i));
                    }
                    // start running the program
                    programRun();
                };
                console.log("got to end of script");
            }) ();
        <script>
    </body>
</html>

我几乎可以肯定这是我搞砸的一些基本事情，因为我没有从运行代码中得到任何错误。 任何帮助都值得赞赏:)

这条线导致了它。

var balls[];

更正它，将其替换为：

var balls = [];

然后，您应该会看到日志。

更新：

我用上面的代码创建了一个小提琴，并修改了你的代码片段，以符合一个可能适合你在编写自己的球动画版本时需要的版本。

以下是我在代码中看到的问题：

  1. 当然，上面提到的数组声明var balls[]; var balls = [];

  2. 不要忘记使用 var 关键字声明变量。我变了

    time_stamp = ts;canvas = document.getElementById（"canvas"）;

自 

var time_stamp = ts;
var canvas = document.getElementById("canvas");

3. 您的 html 代码表明画布的 ID 是id="console"但您的 javascript 尝试获取带有 id="canvas" 的元素。

改变

<canvas id="console" width="600" height="600"></canvas>

自

<canvas id="canvas" width="600" height="600"></canvas>

  1. 在你的 ball.each（） 迭代中使用 canvas 元素来调用应该在 CanvasRenderingContext2D 中的方法。在var canvas声明后添加内容。

    var ctx = canvas.getContext（'2d'）;

使用 ctx 变量操作画布本身。这应该是您的function update()定义。

function update() {
    var ts = Date.now();
    var time_elapsed = ts - (time_stamp || ts);
    var time_stamp = ts;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    // update ball positions and detect wall collisions
    balls.forEach(function (ball){
        ctx.clearRect( ball.xLocation, ball.yLocation, ball.scaleWidth, ball.scaleHeight );
        ball.update();
        ctx.drawImage( ballImage, ball.xLocation, ball.yLocation, ball.scaleWidth, ball.scaleHeight );
    });
}

更新：

声明变量时始终使用 var。如果你想将它们用作可以从不同范围（内部范围）访问的变量，那么你可以通过声明它们更高的范围来实现。

像这样：

function BallAnimation() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  function updateBall() {
    ctx.fillRect(.....);
    ...
  }
  function Ball() {
    this.canvas = canvas;
  }
}

通过这种方式，您仍然可以从其他作用域获取要共享的变量的引用。阅读本文以了解更多为什么var很重要。

相关文章：