（Javascript + HTML）如何讓我的選擇陳述答案到我的繪圖畫布

我想讓我的代碼顯示給用戶他們的輸入從select語句回到他們通過畫布繪製。我不知道如何做到這一點，將不勝感激任何幫助。這是我的代碼。（Javascript + HTML）如何讓我的選擇陳述答案到我的繪圖畫布

<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"> 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 

      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 
      ctx.fillText("Greeting Card", 135, 55); 
      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
    </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> 
     <input type="button" value="make card" id="draw" onclick="draw();"> 
    </div>  
    <canvas id="card" width="1400" height="900"></canvas> 
</body>

更新的代碼

<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"> 
     function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 

      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 

      ctx.fillText(document.getElementById("greet").options[document.getElementById("‌greet").selectedIndex].text, 135, 55); 
      document.getElementById("div1").style.visibility = "hidden"; 
      document.getElementById("div2").style.visibility = "hidden"; 
     } 
    </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-01 Orphan_Crippler

你只是堅持如何從下拉列表中選擇文本，然後也許使用它來代替''賀卡'/'？其餘的繪圖代碼是否按照您的期望執行？ –

我有和@ jamesthorpe一樣的感覺。在這種情況下，只需使用'ctx.fillText（document.getElementById（「greet」）.options [document.getElementById（「greet」）.selectedIndex] .text，135,55）''或者通過使用變量來更好地分解它或兩個 – dirluca

感謝您的回覆。是的，我希望它取代「賀卡」我暫時只是用它作爲佔位符。你給我的代碼行沒有預期的結果。我是javascript的新手:) –

試試這個，我剛纔提出的單擊事件的工作。從您的Button中刪除onClick event。

var bt = document.querySelector("#draw"); 
function draw() { 
      var c = document.getElementById("card"); 
      var ctx = c.getContext("2d"); 
      ctx.strokeStyle = "#FF0000"; 
      ctx.lineWidth = 10; 
      ctx.strokeRect(125, 25, 960, 540); 
      ctx.fillStyle = "blue"; 
      ctx.font = "22px Arial"; 
      ctx.fillText(document.getElementById("greet").options[document.getElementById("greet").selectedIndex].text, 135, 55); 

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

來源

2016-07-01 16:00:34 frnt

（Javascript + HTML）如何讓我的選擇陳述答案到我的繪圖畫布

回答

相關問題