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);
    };

画布大小调整

1 个答案: