根据用户选择输入编写html文本

我有一个html页面，它基于HTML画布中的动态选择用户输入绘制多个几何图形。根据用户选择输入编写html文本

<select id="mySelect" name="Geometrical Figures"><option>Triangle</option> 
<select id="cood1" name="Coordinate1"><option>50</option> 
<select id="cood2" name="Coordinate2"><option>50</option> 
<select id="imgcolor" name="ImageColour"><option>Red</option> 
<select id="linewidth" name="Linewidth"><option>5</option> 
<button class="button" id="imagedraw" onclick="draw()">Draw Image</button>

现在，当我按一下按钮，我想显示文本所选细节

示例文本

三角形已经被绘制起点坐标（50,50），颜色为红色，线宽为10.

注意：文本应该只出现在仅用于按钮点击的位置。

来源

2016-04-25 MaxPyne

欢迎到StackOverflow！你试过什么了？ – manniL

将下列内容添加到onClick函数中。还创建一个ID details元素（或任何你想要的，但它需要对应于该函数的第一选择）

function onClick(){ 
    ...//your current code 
    document.getElementById("details").innerHTML = "A triangle has been drawn with starting coordinates ("+document.getElementById("cood1").value+","+document.getElementById("cood2").value+") , colour "+document.getElementById("imgcolor").value+", linewidth "+document.getElementById("linewidth").value+"."; 
}

来源

2016-04-25 08:41:29

非常感谢！它的作品...这真的很有用:) – MaxPyne

试试这个

function draw() { 
 

 

 

 
document.getElementById("result").textContent = "Geometrical Figures:- " + document.getElementById("mySelect").value + ", Color:- " + document.getElementById("imgcolor").value 
 

 
}

<html> 
 
<head> 
 

 
</head> 
 
<select id="mySelect" name="Geometrical Figures"> 
 
<option>Triangle</option> 
 
</select> 
 

 
<select id="imgcolor" name="ImageColour"><option>Red</option> 
 
</select> 
 
<input type="button" onclick="draw()" value="Draw"/> 
 

 
<h3 id="result"></h3> 
 

 
</html>

来源

2016-04-25 08:56:31 Jobin

<html> 
<head> 
<script> 


function draw(){ 
var myselect = document.getElementById('mySelect').value; 
var cood1=document.getElementById('cood1').value; 
var cood2=document.getElementById('cood2').value; 
var imgcolor=document.getElementById('imgcolor').value; 
var lnwidth =document.getElementById('linewidth').value; 
var myc = document.getElementById('myCanvas'); 
var convas= myc.getContext('2d'); 
convas.beginPath(); 
convas.linewidth=lnwidth; 
convas.fillStyle="#FF0000"; 
convas.moveTo(cood1, cood2); 
convas.lineTo(50, 100); 
convas.lineTo(70, 100); 
convas.closePath(); 
convas.fill(); 
document.getElementById('textID').innerHTML = 'Shape Parameters are :'+myselect+" , Coordinates are :"+"("+cood1+","+cood2+")"+"Image color : "+imgcolor +"line width is : "+lnwidth; 
} 
</script> 
</head> 
<body> 

<br> 
<select id="mySelect" name="Geometrical Figures"><option>Triangle</option></select> 
<select id="cood1" name="Coordinate1"><option>50</option> </select> 
<select id="cood2" name="Coordinate2"><option>50</option></select> 
<select id="imgcolor" name="ImageColour"><option>Red</option></select> 
<select id="linewidth" name="Linewidth"><option>5</option></select> 
<button class="button" id="imagedraw" onclick="draw()">Draw Image</button> 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 

</canvas> 
<div id='text ID'></div> 
</body> 
</html>

来源

2016-04-25 09:51:18 Sunoo

根据用户选择输入编写html文本

回答

相关问题