刷新HTML画布而不刷新页面

Question

I have a bouncing ball simulation that is coded with javascript and html. I need to update some of the variables (Gravity and Bounce factor) by inputting the values in a text box then click on a button to refresh the canvas and bounce the ball with new parameters. Heres my code.

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); var W = 1300, H = 450; canvas.height = H; canvas.width = W; var ball = {}, gravity = 0.2, bounceFactor = 0.7; $('#update').click(function() { gravity = document.getElementById('grav').value; bounceFactor = document.getElementById('bounce').value; document.getElementById('setgrav').value = gravity; document.getElementById('setbounce').value = bounceFactor; update(); setInterval(update, 1000 / 60); }); ball = { x: 0, y: 0, radius: 15, color: "red", // Velocity components vx: 2, vy: 1, draw: function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.fillStyle = this.color; ctx.fill(); ctx.closePath(); } }; function clearCanvas() { ctx.clearRect(0, 0, W, H); } function update() { clearCanvas(); ball.draw(); ball.y += ball.vy; ball.x += ball.vx; ball.vy += gravity; if (ball.y + ball.radius > H) { ball.y = H - ball.radius; ball.vy *= -bounceFactor; } } setInterval(update, 1000 / 60); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> Gravity <input type="text" name="grav" id="grav" value="" /> <p> Bounce <input type="text" name="bounce" id="bounce" value="" /> <p> Set Gravity <input type="text" name="setgrav" id="setgrav" value="" /> <p> Set Bounce <input type="text" name="setbounce" id="setbounce" value="" /> <p> </form> <button id="update">Update</button> <canvas id="canvas" style="display:block; border: 1px solid blue; margin:50px auto;"> </canvas> 

Its not working. When i click update. the Canvas goes blank. What im i doing wrong? Thanks

UPDATED QUESTION:

What if i needed to use an image for the ball instead of drawing the ball using Javascript?

Answer 1

Instead of assigning the actual value which is string, assign the value parsed as float into the variables.

gravity = parseFloat(document.getElementById('setgrav').value);
bounceFactor = parseFloat(document.getElementById('setbounce').value);

Now, whenever you click update, the values will be updated. I am assuming that the elements having set in their ids are the ones used to set the values of gravity and bounce.

Answer 2

Thanks For the help @Akash, your solution helped out. It updated the values but i also had to reset the balls attributes for it to start bouncing from the beginning once i click update. Heres the Javascript code for the update function

$('#update').click(function(){

gravity = parseFloat(document.getElementById('grav').value);
bounceFactor = parseFloat(document.getElementById('bounce').value);

document.getElementById('setgrav').value = gravity;
document.getElementById('setbounce').value = bounceFactor;

ball = {
    x: 0,
    y: 0,

    radius: 15,
    color: "red",

    // Velocity components
    vx: 2,
    vy: 1,

    draw: function() {

        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }
};


update();

});

Answer 3

The controls of the form have no value (=== undefined) at the start, so when you update, you let one/several undefined values leak through your code. As you might know, this won't break the program, it will just cease the display in this case.

Two fixes :
• Initialize your controls so they have a valid value. It will also help the user to know about the order of magnitude of the values.
• Update the variables values only after making some basic validation.

function getValue(ctrlId) {
   return document.getElementById(ctrlId).value;
}

function isValidNumber ( val ) { return !isNaN(+val); }

function update() {
   var newGravity = getValue( 'grav' );
   if (isValidNumber ( newGravity ) ) gravity = newGravity ;
   //... same for other values.
}