帆布弹跳球显示一个椭圆形的黑球

Question

的jsfiddle

预期行为

样本值：速度：10； 角度：45; 红色; 半径：50。

点击“射击！” 按钮，球应该移动直到它最终消失在墙壁之一的后面。 请注意，我想用重力模拟现实世界的球。

每次我们单击“射击”，都应向balls阵列中再添加一个球，该balls也将被绘制。

怎么了

单击一次/多次拍摄会显示黑色椭圆。 没有看到控制台错误。

码：

(function () {
    var canvas = document.querySelector("canvas"),
        ctx = canvas.getContext("2d"),
        WIDTH = canvas.width,
        HEIGHT = canvas.height;

    // our ball object
    function Ball(radius, color) {
        this.radius = radius;
        this.color = color;
        this.x = 50; // start coordinates
        this.y = 50;
        this.velX = 0;
        this.velY = 0;
        this.accX = 0;
        this.accY = 0;
        this.gravity = 0;

        this.start = function (angle, velocity) {
            this.gravity = 9.8;
            this.angle = angle / 180 * Math.PI; // convert to radians
            this.velX = velocity * Math.cos(this.angle);
            this.velY = velocity * Math.sin(this.angle);
            this.accX = 0; // zero intially
            this.accY = 0; // TODO: set option for user to set himself
        };

        this.update = function () {
            this.velY -= this.gravity;
        };

        this.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            ctx.fillSyle = this.color;
            ctx.fill();
            ctx.closePath();
        }
    }

    // balls array
    var balls = [];

    document.querySelector("input[type='button']").onclick = function () {
        var color = gId("color").value,  // getElementById; defined in jsfiddle
            velocity = gId("velocity").value,
            angle = gId("angle").value,
            radius = gId("radius").value;

        var ball = new Ball(radius, color);
        ball.start(angle, velocity);
        balls.push(ball);
    };

    setInterval(function () {
        for (var i = 0, len = balls.length; i < len; i++) {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);
            balls[i].draw();
            balls[i].update();
        }
    }, 1000 / 60); // 1000/x depicts x fps

我不知道为什么它不起作用。 系统：最新的Chrome / Firefox Windows 7。

任何帮助表示赞赏。 请发表评论以获取更多信息。

Answer 1

1）在画布元素上设置width和height属性，而不是应用CSS样式，即：

    <canvas width="400px" height="400px">You don't support canvas.</canvas>

2）将引力值除以60，因为每1/60秒调用一次更新函数，即：

    this.start = function (angle, velocity) {
        this.gravity = 9.8 / 60;
        this.angle = angle / 180 * Math.PI; // convert to radians
        this.velX = velocity * Math.cos(this.angle);
        this.velY = velocity * Math.sin(this.angle);
        this.accX = 0; // zero intially
        this.accY = 0; // TODO: set option for user to set himself
    };

3）将更新功能更改为：

    this.update = function () {
        this.velY += this.gravity;
        this.x += this.velX;
        this.y += this.velY;
    };

4）将ctx.clearRect方法移至for循环之外，否则您将只能看到一个始终在动画的球，即

setInterval(function () {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    for (var i = 0, len = balls.length; i < len; i++) {            
        balls[i].draw();
        balls[i].update();
    }
}, 1000 / 60); // 1000/x depicts x fps

这里是更新的js小提琴： http : //jsfiddle.net/km6ozj6L/1/