HTML画布在按键上动态地将文本框值输入到画布中答案

【问题标题】：HTML canvas dynamically enter text boxes values into canvas on keypressHTML画布在按键上动态地将文本框值输入到画布中
【发布时间】：2014-08-03 07:41:38
【问题描述】：

分别拥有三个文本框textbox1、textbox2和textbox3

当用户输入文本框时，我想将这些文本框的值放入画布（cnv）中

并在用户从文本框中删除值时删除它。

问题是当我试图删除一个文本框的值时，画布上的所有值都被清除了。但我想防止旧值。

【问题讨论】：

标签： javascript jquery html html5-canvas

【解决方案1】：

change 事件仅在焦点离开文本框时触发。

对于按键响应，请在您的文本框中监听 keyup 事件，而不是 change 事件。

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var $text1=document.getElementById("sourceText1");
    var $text2=document.getElementById("sourceText2");

    $text1.onkeyup=function(e){ redrawTexts(); }
    $text2.onkeyup=function(e){ redrawTexts(); }

    function redrawTexts(){
        ctx.clearRect(0,0,canvas.width,canvas.height);   
        wrapText(ctx,$text1.value,20,60,100,24,"verdana");
        wrapText(ctx,$text2.value,150,60,100,24,"verdana");
    }

    function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
      var words = text.split(' ');
      var line = '';
      var lineHeight=fontSize;

      context.font=fontSize+" "+fontFace;

      for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if(testWidth > maxWidth) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }
      context.fillText(line, x, y);
      return(y);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Type text to wrap into canvas.</h4>
    <input id=sourceText1 type=text>
    <input id=sourceText2 type=text><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

这没关系，但我想要更多的文本框，其功能与您所做的相同。但问题是当我尝试插入另一个文本框时，旧文本框的值被删除了......
我已更新我的答案以包含多个文本输入。干杯！

【解决方案2】：

试试这个：

http://jsfiddle.net/9Dhu6/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var y=10
function canvasFillTxt(txt){
    ctx.fillText(txt,10,y);
    y=y+20
}
$('input').on('change',function(){
    canvasFillTxt($(this).val())
})

我希望是你正在寻找的......

【讨论】：