畫布大小調整

Question

我有一個畫布，可以動態更改用戶輸入的大小，即每當他在輸入文本框中鍵入內容時。 如果用戶輸入的新尺寸大於當前尺寸，則效果很好，但是如果我嘗試縮小其畫布尺寸，則先前的值仍然存在...如何在不刷新頁面的情況下做到這一點？ 這是代碼：

<p style="line-height: 18px; font-size:18px;  font-family: times;">
<br>
<div id = "div1">
<canvas id="canvas"></canvas>
<button onclick="myFunction()">Clickme</button>
<input type= "number" id ="tx1">
<input type= "number" id ="tx2">
<script>
    function myFunction(){
        var node = document.getElementById("div1"); 
        var kid1 = document.createElement("p"); 
        var kid2 = document.createTextNode("hey"); 
        var kid3 = document.createElement("span"); 
        node.appendChild(kid1); 
        node.appendChild(kid2); 
        node.appendChild(kid3); 
    }
    window.onkeyup = function (e) {
        var code = e.keyCode ? e.keyCode : e.which;
        var t1=document.getElementById('tx1').value;
        var t2=document.getElementById('tx2').value;
        console.log(t1);
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, t1, t2);
};
</script>

Answer 1

嘗試在代碼中添加clearRect（）

window.onkeyup = function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var t1=document.getElementById('tx1').value;
    var t2=document.getElementById('tx2').value;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.clearRect(10,10,canvas.width,canvas.height);
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, t1, t2);
    };