Question

我有一个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。

注意：文本应仅在按钮点击时显示。

Answer 1

将以下内容添加到onClick功能中。还要创建一个标识为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+".";
}

Answer 2

Try this

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>

Answer 3

<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>

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

3 个答案: