退格時從輸入文本動態增加字體大小

Question

在我的代碼中，我有一個畫布，可以在其中輸入 2 行文本。 當我寫作時，文本適合畫布（字體大小正在減小），我也可以更改它的顏色。 因此，當我寫入文本輸入時，文本大小正在減小，但如果我退格，它不會恢復到舊大小。 有人可以幫我解決這個問題嗎？ 我嘗試將另一個 if with (width < 100)，並將 int 更改為 +1，但它不起作用。 這是 JSFiddle 代碼： https ://jsfiddle.net/dk54jb06/8/。

 var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); var selectedTextFont = "Arial Black"; var selectedFontSize = "20px"; var selectedFontStyle = "bold"; var selectedFontColor = "#000000"; $('#nametag').bind('change keyup input', redrawTextsCan2); $('#line2').bind('click', redrawTextsCan2); $('#line3').bind('click', redrawTextsCan2); function redrawTextsCan2() { ctx2.clearRect(0, 0, canvas2.width, canvas2.height); ctx2.textAlign = "center"; ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont; ctx2.fillStyle = selectedFontColor; var width = ctx2.measureText($('#line1').val()).width; if (width > 100) { var selectedFontSizeInt = (selectedFontSize.replace(/(^\\d+)(.+$)/i,'$1') - 1); selectedFontSize = '' + selectedFontSizeInt + "px"; ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont; } ctx2.fillText($('#line1').val().toUpperCase(), canvas2.width * 0.5, 20); } function color2(v4) { v4 = v4.dataset.id; switch (v4) { // top: 103px; left: 210px case "black": selectedFontColor = '#000000'; break; case "red": selectedFontColor = "#ff0000"; break; case "green": selectedFontColor = "#009933"; break; case "orange": selectedFontColor = "#ff9900"; break; } redrawTextsCan2(); } function chfont3(v3) { switch (v3) { // top: 103px; left: 210px case "arial": selectedTextFont = "Arial Black"; break; case "comic": selectedTextFont = "Comic Sans MS"; break; case "lucida": selectedTextFont = "Lucida Sans"; break; case "franklin": selectedTextFont = "Franklin Gothic"; break; case "impact": selectedTextFont = "Impact"; break; } redrawTextsCan2(); }

 #canvas2 { border: 2px dotted black; border-radius: 5px; position: absolute; } #canvas3 { border: 2px dotted black; border-radius: 5px; position: absolute; top: 220px; } #canvas4 { border: 2px dotted black; border-radius: 5px; position: absolute; } .green { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: #009933; } .green:hover, .green:active, .green:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } .red { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: #ff0000; } .red:hover, .red:active, .red:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } .black { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: black; } .black:hover, .black:active, .black:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } .orange { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: orange; } .orange:hover, .orange:active, .orange:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } @font-face { font-family: 'MyFont'; src: url('https://cdn.rawgit.com/lxc698/CustomizePanel/3817e8da/Standard-Regular.ttf'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3> <button type="button" class="black" data-id="black" onclick="color2(this)"></button> <button type="button" class="red" data-id="red" onclick="color2(this)"></button> <button type="button" class="green" data-id="green" onclick="color2(this)"></button> <button type="button" class="orange" data-id="orange" onclick="color2(this)"></button> <br> <br> <select name="Font" onchange="chfont3(this.value)"> <option value="arial" selected="selected" style="font-family: Arial Black">ARIAL</option> <option value="comic" style="font-family: Comic Sans MS">COMIC SANS MS</option> <option value="lucida" style="font-family: Lucida Sans">LUCIDA SANS</option> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <br> <br> <form action="" method="POST" id="nametag" class="nametag"> Line1: <input type="text" id="line1" maxlength="22" name="line1" style="width:250px;" /> <br> Line2: <input type="text" id="line2" maxlength="22" name="line1" style="width:250px;" /> <br> <br> <canvas width="130px" height="80px" id="canvas2"></canvas>

Answer 1

您可以使用e.key屬性。

文檔

這里傳遞事件。

redrawTextsCan2(e) {
    if (e.key === 'Backspace') {
        //Calculate the font size.
    }
}