（HTML + Javascript）キャンバスに表示するテキスト入力と背景を埋めるためのラジオボタン入力を取得する

私は、ユーザー入力をJavaScript関数でキャンバスの表示を変更させようとしています。私は修正できないような2つの問題にぶつかってきました。 1）私のdocument.getElementById（ "name"）がキャンバスに表示されておらず、selectステートメントも消えています。 2）キャンバスの背景色を赤または青に変更するifループを取得しようとしています。しかし、私はそれを自分で行う方法を知らない。そのような言葉になる質問を申し訳ありません。どんな助けでも大歓迎です。（HTML + Javascript）キャンバスに表示するテキスト入力と背景を埋めるためのラジオボタン入力を取得する

<html> 
<head> 
    <title>Greeting Card Generator</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript"> 
     var bt = document.querySelector("#draw"); 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 
      ctx.strokeStyle = "orange"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "black"; 
      ctx.textAlign = "start"; 
      ctx.font = "22px Arial"; 
      ctx.fillText(document.getElementById("name", 435, 55)); 
      ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 535, 95); 


      var redButton = document.getElementById("bgRed"); 
      var blueButton = document.getElementById("bgBlue"); 

      if (redButton.checked) { 
       //fill background red 
      } else if (blueButton.checked) { 
       //fill background blue 
      } 

      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
     //bt.addEventListener("click",draw);  
    </script> 
    <style> 
     #div1{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 24px; 
      text-align: center; 
      border: 25px solid red; 
      padding: 25px; 
      width: 50%; 
      margin: 0 auto; 
     } 
     #div2{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 16px; 
      text-align: center; 
      border: 25px solid orange; 
      padding: 25px; 
      width: 50%; 
      height: 300px; 
      margin: 0 auto; 

     } 



    </style> 
</head> 
<body> 
    <div id="div1">Greeting Card Generator</div> 
    <div id="div2"> 
     What Kind of Greeting Would You Like?<select name="greet" id="greet"> 
      <option value="-1" selected>-Select-</option> 
      <option value="1">Birthday</option> 
      <option value="2">Graduation</option> 
      <option value="3">Engagement</option> 
     </select> 
     <br> 
     What is the name of the recipient<input type="text" id="name" name="name"/> 
     <br> 
     What background colour would you like on the card? 
     <input type="radio" name="background" id="bgRed" value="red" checked/>Red 
     <input type="radio" name="background" id="bgBlue" value="blue" />Blue 
     <br> 
     <input type="button" value="make card" id="draw" onclick="draw();"> 
    </div>  
    <canvas id="card" width="1400" height="900"></canvas> 
</body>

出典

2016-07-02 Orphan_Crippler

ポイントは、この行です：

ctx.fillText(document.getElementById("name", 435, 55));

getElementByIdをが遅すぎる閉じられています。あなたが代わりにテキストボックスを使用.VALUEからテキストを抽出したい場合は

window.onload = function() { 
 
    var bt = document.querySelector("#draw"); 
 
    function draw() { 
 
    var c = document.getElementById("card"); 
 
    var ctx = c.getContext("2d"); 
 
    
 
    // set first the background color 
 
    if (document.getElementById("bgRed").checked) { 
 
     ctx.fillStyle = "red"; 
 
    } else { 
 
     ctx.fillStyle = "blue"; 
 
    } 
 
    ctx.fillRect(125, 25, 960, 540); 
 

 
    // continue.... 
 
    ctx.strokeStyle = "orange"; 
 
    ctx.lineWidth = 10; 
 
    ctx.strokeRect(125, 25, 960, 540); 
 
    ctx.fillStyle = "black"; 
 
    ctx.textAlign = "start"; 
 
    ctx.font = "22px Arial"; 
 
    ctx.fillText(document.getElementById("name").value, 435, 55); 
 
    ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 535, 95); 
 

 

 

 
    document.getElementById("div1").style.display = "none"; 
 
    document.getElementById("div2").style.display = "none"; 
 
    } 
 
    bt.addEventListener("click",draw); 
 
}

#div1{ 
 
    background-color: cyan; 
 
    font-family: "Arial Black", Gadget, sans-serif; 
 
    font-size: 24px; 
 
    text-align: center; 
 
    border: 25px solid red; 
 
    padding: 25px; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
#div2{ 
 
    background-color: cyan; 
 
    font-family: "Arial Black", Gadget, sans-serif; 
 
    font-size: 16px; 
 
    text-align: center; 
 
    border: 25px solid orange; 
 
    padding: 25px; 
 
    width: 50%; 
 
    height: 300px; 
 
    margin: 0 auto; 
 

 
}

<div id="div1">Greeting Card Generator</div> 
 
<div id="div2"> 
 
    What Kind of Greeting Would You Like?<select name="greet" id="greet"> 
 
    <option value="-1" selected>-Select-</option> 
 
    <option value="1">Birthday</option> 
 
    <option value="2">Graduation</option> 
 
    <option value="3">Engagement</option> 
 
</select> 
 
    <br> 
 
    What is the name of the recipient<input type="text" id="name" name="name"/> 
 
    <br> 
 
    What background colour would you like on the card? 
 
    <input type="radio" name="background" id="bgRed" value="red" checked/>Red 
 
    <input type="radio" name="background" id="bgBlue" value="blue" />Blue 
 
    <br> 
 
    <input type="button" value="make card" id="draw"> 
 
</div> 
 
<canvas id="card" width="1400" height="900"></canvas>

出典

2016-07-02 18:42:10 gaetanoM

：

ctx.fillText(document.getElementById("name").value, 435, 55);

スニペット：に変更します。これは動作するはずです：

ctx.fillText(document.getElementById("name").value, 435, 55);

あなたの文書が正しく名前を表示するように変更した場合： example with changed line

をここに完全なコードです：

<html> 
<head> 
    <title>Greeting Card Generator</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript"> 
     var bt = document.querySelector("#draw"); 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 
      ctx.strokeStyle = "orange"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "black"; 
      ctx.textAlign = "start"; 
      ctx.font = "22px Arial"; 
      ctx.fillText(document.getElementById("name").value, 435, 55); 
      ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 535, 95); 


      var redButton = document.getElementById("bgRed"); 
      var blueButton = document.getElementById("bgBlue"); 

      if (redButton.checked) { 
       //fill background red 
      } else if (blueButton.checked) { 
       //fill background blue 
      } 

      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
     //bt.addEventListener("click",draw);  
    </script> 
    <style> 
     #div1{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 24px; 
      text-align: center; 
      border: 25px solid red; 
      padding: 25px; 
      width: 50%; 
      margin: 0 auto; 
     } 
     #div2{ 
      background-color: cyan; 
      font-family: "Arial Black", Gadget, sans-serif; 
      font-size: 16px; 
      text-align: center; 
      border: 25px solid orange; 
      padding: 25px; 
      width: 50%; 
      height: 300px; 
      margin: 0 auto; 

     } 



    </style> 
</head> 
<body> 
    <div id="div1">Greeting Card Generator</div> 
    <div id="div2"> 
     What Kind of Greeting Would You Like?<select name="greet" id="greet"> 
      <option value="-1" selected>-Select-</option> 
      <option value="1">Birthday</option> 
      <option value="2">Graduation</option> 
      <option value="3">Engagement</option> 
     </select> 
     <br> 
     What is the name of the recipient<input type="text" id="name" name="name"/> 
     <br> 
     What background colour would you like on the card? 
     <input type="radio" name="background" id="bgRed" value="red" checked/>Red 
     <input type="radio" name="background" id="bgBlue" value="blue" />Blue 
     <br> 
     <input type="button" value="make card" id="draw" onclick="draw();"> 
    </div>  
    <canvas id="card" width="1400" height="900"></canvas> 
</body>

が

出典

2016-07-02 18:46:28

（HTML + Javascript）キャンバスに表示するテキスト入力と背景を埋めるためのラジオボタン入力を取得する

答えて

関連する問題