Question

我正在学习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>

我几乎可以肯定这是我搞砸了一些基本的事情，因为我没有因为运行代码而得到任何错误。任何帮助表示赞赏：）

Answer 1

这一行导致了它..

var balls[];

将其替换为：

来纠正它

var balls = [];

然后你应该看到日志。

更新

我使用上面的代码创建了一个fiddle并修改了一些代码片段，以符合您编写自己的球动画版本所需的版本。

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

当然上面提到的数组声明var balls[];到var balls = [];
不要忘记使用var关键字声明变量。我改变了

time_stamp = ts; canvas = document.getElementById（＆＃34; canvas＆＃34;）;

到

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>

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

var ctx = canvas.getContext（＆＃39; 2d＆＃39;）;

使用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;
  }

}

以这种方式，您仍然可以获得要从其他范围共享的变量的引用。阅读此article以了解var重要的原因。

使用Canvas进行Web动画会导致什么都没有发生？

1 个答案: