javascript - 无法读取 HTML5 Canvas 中未定义的属性 x

Question

您好，我有以下 Canvas 应用程序:http://dev.driz.co.uk/canvas/

但它没有渲染任何东西。当用户移动光标时，它应该显示一堆在屏幕上移动的球。我认为这只是某个地方的一个小错误，因为它在此处的旧版本中运行良好:http://dev.driz.co.uk/app/

加载需要一段时间，就好像它正在做某事，但只是卡在某个地方，但代码对我来说看起来不错。在 Firebug 中测试后出现以下错误:“无法读取未定义的属性 x”主要围绕渐变创建的几行。我不知道问题是什么:/它也提示属性颜色。我已经尝试了几个小时来尝试解决这个问题，但我迷路了，真的需要一些帮助。

如果有人能提供帮助，我们将不胜感激。谢谢

编辑:这是代码:

function App()
            {

                var pool    =   document.getElementById('pool');            
                var canvas  =   pool.getContext('2d');
                var cwidth  =   pool.width = document.width;
                var cheight =   pool.height = document.height;
                var ctop    =   pool.offsetTop;
                var cleft   =   pool.offsetLeft;
                var size    =   [5, 10, 15, 20, 25, 30];

                var numBalls    =   10;

                var i;
                var x;
                var y;

                var mouseX = 0;
                var mouseY = 0;


                // GIVES EACH BALL A RANDOM COLOR

                function rgb()
                { 
                    var color = 'rgb(';

                    for( i=0; i<3; i++)
                    { 
                        color += Math.floor(Math.random() * 255) + ',';
                    }

                    return color.replace(/\,$/,')');
                }

                // CREATES A BALL

                function CreateBall(x, y, vx, vy, r, s)
                {
                    this.color = rgb();
                    this.x     = x;
                    this.y     = y;
                    this.vX    = vx;
                    this.vY    = vy;
                    this.r     = r;
                    this.size  = s;
                }

                var ball = [], x, y, vx, vy, r, s;

                for ( i = 0; i < numBalls; i++ )
                { 
                    /*x  = Math.random() * cwidth  >> 0;
                    y  = Math.random() * cheight >> 0;
                    vx = Math.random() * 20 - 6;
                    vy = Math.random() * 20 - 6;
                    r  = Math.random() * 30 + 30;*/
                    x = cwidth / 2;
                    y = cheight / 2;
                    vx = Math.random() * 20 - 6;
                    vy = Math.random() * 20 - 6;
                    r = Math.random() * 30 + 30;

                    s  = size[Math.random() * size.length >> 0];

                    // CREATES THE BALLS

                    ball.push( new CreateBall(x, y, vx, vy, r, s)); 
                }

                setInterval(function ()
                {
                    canvas.clearRect(0, 0, cwidth, cheight);

                    for ( i = 0; i < balls.length; i++ )
                    {
                        var gradient = canvas.createRadialGradient(ball[i].x + ball[i].r/4, ball[i].y - ball[i].r/4, ball[i].r/5, ball[i].x, ball[i].y, ball[i].r);
                        gradient.addColorStop(0, '#fff');
                        gradient.addColorStop(.85, ball[i].color);
                        gradient.addColorStop(1, '#222');

                        canvas.fillStyle = gradient;

                        ball[i].vx *= 0.99;
                        ball[i].vy *= 0.99;

                        ball[i].x += ball[i].vx;
                        ball[i].y += ball[i].vy;

                        if ( ball[i].x < ball[i].r || ball[i].x > cwidth - ball[i].r )
                        {
                            ball[i].vx = -ball[i].vx;
                            ball[i].x += ball[i].vx;
                        }

                        if ( ball[i].y < ball[i].r || ball[i].y > cheight - ball[i].r )
                        {
                            ball[i].vy = -ball[i].vy;
                            ball[i].y += ball[i].vy;
                        }

                        canvas.beginPath();

                        canvas.arc ( ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, true );

                        canvas.fill();
                    }
                }, 30);

                // END FOR

                // MOUSE MOVEMENT - BALLS SHOULD MOVE AWAY FROM MOUSE CURSOR

                pool.onmousemove = function ( e )
                {
                    x = e.pageX - cleft;
                    y = e.pageY - ctop;

                    for ( i = 0; i < balls.length; i++ )
                    {
                        if ( Math.abs( x - ball[i].x ) < 20 && Math.abs( y - ball[i].y ) < 20 )
                        {
                            ball[i].vx = ( x - ball[i].x ) / 1;
                            ball[i].vy = ( y - ball[i].y ) / 1;
                        }
                    }
                };

              // END APP

            }

Answer 1

function App() {
    var pool = document.getElementById('pool');
    var canvas = pool.getContext('2d');
    var cwidth = pool.width = document.width;
    var cheight = pool.height = document.height;
    var ctop = pool.offsetTop;
    var cleft = pool.offsetLeft;
    var size = [5, 10, 15, 20, 25, 30];
    var numBalls = 3;
    var i;
    var x;
    var y;
    var mouseX = 0;
    var mouseY = 0;

    function rgb() {
        var color = 'rgb(';
        for (var i = 0; i < 3; i++) {
            color += Math.floor(Math.random() * 255) + ',';
        }
        return color.replace(/\,$/, ')');
    }

    function CreateBall(x, y, vx, vy, r, s) {
        this.color = rgb();
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.r = r;
        this.size = s;
    }

    var ball = [],
        x, y, vx, vy, r, s;

    for (var i = 0; i < numBalls; i++) {
        x = cwidth / 2;
        y = cheight / 2;
        vx = Math.random() * 20 - 6;
        vy = Math.random() * 20 - 6;
        r = Math.random() * 30 + 30;
        s = size[Math.random() * size.length >> 0];

        ball.push(new CreateBall(x, y, vx, vy, r, s));
    }

    setInterval(function () {
        canvas.clearRect(0, 0, cwidth, cheight);
        for (var i = 0; i < ball.length; i++) {
            var gradient = canvas.createRadialGradient(ball[i].x + ball[i].r / 4, ball[i].y - ball[i].r / 4, ball[i].r / 5, ball[i].x, ball[i].y, ball[i].r);
            gradient.addColorStop(0, '#fff');
            gradient.addColorStop(.85, ball[i].color);
            gradient.addColorStop(1, '#222');

            canvas.fillStyle = gradient;

            ball[i].vx *= 0.99;
            ball[i].vy *= 0.99;

            ball[i].x += ball[i].vx;
            ball[i].y += ball[i].vy;

            if (ball[i].x < ball[i].r || ball[i].x > cwidth - ball[i].r) {
                ball[i].vx = -ball[i].vx;
                ball[i].x += ball[i].vx;
            }

            if (ball[i].y < ball[i].r || ball[i].y > cheight - ball[i].r) {
                ball[i].vy = -ball[i].vy;
                ball[i].y += ball[i].vy;
            }

            canvas.beginPath();
            canvas.arc(ball[i].x, ball[i].y, ball[i].r, 0, Math.PI * 2, 0);
            canvas.fill();
        }
    }, 1000 / 30);

    pool.onmousemove = function (e) {
        x = e.pageX - cleft;
        y = e.pageY - ctop;

        for (var i = 0; i < ball.length; i++) {
            if (Math.abs(x - ball[i].x) < 20 && Math.abs(y - ball[i].y) < 20) {
                ball[i].vx = (x - ball[i].x) / 1;
                ball[i].vy = (y - ball[i].y) / 1;
            }
        }
    };
}

我刚刚踢了它的屁股 here ，你也想踢它的屁股吗？？