为什么我不能在HTML5画布和JavaScript上使用2个以上的变量？_Javascript_Jquery_Html_Html5 Canvas

为什么我不能在HTML5画布和JavaScript上使用2个以上的变量？

javascript jquery html html5-canvas

为什么我不能在HTML5画布和JavaScript上使用2个以上的变量？,javascript,jquery,html,html5-canvas,Javascript,Jquery,Html,Html5 Canvas,我正在使用以下代码： <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></

我正在使用以下代码：

<!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");
    var $text3=document.getElementById("sourceText3");

    $text1.onkeyup=function(e){ redrawTexts(); }
    $text2.onkeyup=function(e){ redrawTexts(); }
    $text3.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");
        wrapText(ctx,$text3.value,200,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>
    <input id=sourceText3 type=text><br>
    <canvas id="canvas" width="900" height="600" style="border:1px solid #000000;"></canvas>
</body>
</html>


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$text1=document.getElementById（“sourceText1”）；
var$text2=document.getElementById（“sourceText2”）；
var$text3=document.getElementById（“sourceText3”）；
$text1.onkeyup=函数（e）{redrawTexts（）；}
$text2.onkeyup=函数（e）{redrawTexts（）；}
$text3.onkeyup=函数（e）{redrawTexts（）；}
函数重画文本（）{
clearRect（0,0，canvas.width，canvas.height）；
wrapText（ctx，$text1.value，20,60100,24，“verdana”）；
wrapText（ctx，$text2.价值，150,60100,24，“verdana”）；
wrapText（ctx，$text3.价值，200,60100,24，“verdana”）；
}
函数wrapText（上下文、文本、x、y、maxWidth、fontSize、fontFace）{
var words=text.split（“”）；
var行=“”；
var lineHeight=fontSize；
context.font=fontSize+“”+fontFace；
for（var n=0；nmaxWidth）{
填充文本（行，x，y）；
行=字[n]+''；
y+=线宽；
}
否则{
直线=测试线；
}
}
填充文本（行，x，y）；
返回（y）；
}
}); // end$（函数（）{}）；
键入要包装到画布中的文本。

我似乎无法让“sourceText3”变量工作

基本上，代码允许实时编辑html5画布，我不能得到超过2个文本输入来工作

理想情况下，我希望更多的输入框，为一个不同的项目，我的工作

非常感谢

Tom

尝试将ID加引号，以便

id=sourceText1 -> id="sourceText1"

这就可以了。

我刚刚将你的HTML粘贴到codepen.io的一个新页面上，三个输入都起作用了。你能描述一下你在这里看到了什么吗？有控制台错误吗？@borrascador，你没有错！你有没有什么想法，为什么在使用firefox加载Sublime文本时，它不起作用？大家好，控制台没有显示任何错误。所以最后我删除了整个文件，重新启动了我的系统，创建了一个新文件，并从上面的代码中复制粘贴。出于某种原因，这已经奏效了。非常感谢您的帮助。@ThomasMoulton很抱歉，我没有任何关于Sublime文本的经验，但我很高兴您有工作要做。如果这种情况再次发生，至少你知道要在网上做一个健康检查。大多数现代浏览器都会自动这样做。这对于最佳实践是很好的，但可能不是导致问题的原因。大家好，控制台没有显示任何错误。所以最后我删除了整个文件，重新启动了我的系统，创建了一个新文件，并从上面的代码中复制粘贴。出于某种原因，这已经奏效了。非常感谢你的帮助。