刷新HTML畫布而不刷新頁面

Question

我有一個用javascript和html編碼的彈跳球模擬。 我需要通過在文本框中輸入值來更新一些變量（重力和反彈系數），然后單擊按鈕刷新畫布並使用新參數反彈球。 這是我的代碼。

 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> 

它不起作用。 當我單擊更新。 畫布為空白。 我在做什么錯？ 謝謝

更新的問題：

如果我需要為球使用圖像而不是使用Javascript繪制球怎么辦？

Answer 1

而不是分配實際的字符串值，而是將解析為float的值分配給變量。

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

現在，每當您單擊更新時，值將被更新。 我假設已在其id中set的元素是用於設置引力和反彈值的元素。

Answer 2

感謝@Akash的幫助，您的解決方案獲得了幫助。 它更新了值，但我還必須重新設置balls屬性，以使其在單擊更新后從頭開始彈起。 這是更新功能的Javascript代碼

$('#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

表單的控件在開始時就沒有值（=== undefined），因此在更新時，您會讓一個/幾個未定義的值通過代碼泄漏。 如您所知，這不會破壞程序，在這種情況下只會停止顯示。

兩個修復：
•初始化控件，使其具有有效值。 它還將幫助用戶了解值的數量級。
•僅在進行一些基本驗證后才更新變量值。

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.
}