我使用Canvas标签创建了条形图，该标记从文本字段中获取输入值并相应地显示图形。提供的代码......
现在，我需要将文本框输入转换为单个textarea输入，输入为：
值：20,130,70; 50,140,80; 20,180,50; 120,10,20
并在取出“No. Of Bars：”（例如上面的3个）和“No Of Times：”（4）作为文本框中的输入后转换为数组。
另外，我需要包含一个函数来计算绘制这些条形所需的空间，并相应地调整它们之间的宽度和空间......
任何人都可以帮助我完成所有这些功能吗?? ??
<HTML>
<Head>
<Title>Vertical Bar Graph</Title>
<script language = "text/javascript" type="text/javascript">
var canvas;
var context;
var _x = 0;
var _y = 0;
var _z = 0;
var _a = 0;
var _b = 0;
var _c = 0;
function draw(newx,newy,newz,newa,newb,newc) {
newx = _x;
newy = _y;
newz = _z;
newa = _a;
newb = _b;
newc = _c;
context.fillStyle="#AA11FF";
context.fillRect(60,270,25,-newx);
context.fillRect(190,270,25,-newy);
context.fillRect(315,270,25,-newz);
context.fillStyle="#AAEE00";
context.fillRect(85,270,25,-newa);
context.fillRect(215,270,25,-newb);
context.fillRect(340,270,25,-newc);
}
function sendVal(form) {
_x = form.xx.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_x);
_y = form.yy.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_y);
_z = form.zz.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_z);
_a = form.aa.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_a);
_b = form.bb.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_b);
_c = form.cc.value;
context.clearRect(0,0,canvas.width,canvas.height);
draw(_c);
context.strokeStyle="#000000";
context.beginPath();
context.moveTo(24,5);
context.lineTo(24,270);
context.lineTo(450,270);
context.stroke();
}
window.onload = function() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
context.strokeStyle="#000000";
context.beginPath();
context.moveTo(24,5);
context.lineTo(24,271);
context.lineTo(480,271);
context.stroke();
context.fillStyle="#AA11FF";
context.fillRect(60,270,25,-220);
context.fillRect(190,270,25,-150);
context.fillRect(315,270,25,-55);
context.fillStyle="#AAEE00";
context.fillRect(85,270,25,-80);
context.fillRect(215,270,25,-120);
context.fillRect(340,270,25,-175);
};
</script>
</head>
<body bgcolor="#6699FF">
<center>
<U><H2>Vertical Bar Graph</H2></U>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<P>
<FORM NAME="SENDX" ACTION="" METHOD="GET">
Enter X: <INPUT TYPE="number" NAME="xx">
Enter Y: <INPUT TYPE="number" NAME="yy">
Enter Z: <INPUT TYPE="number" NAME="zz"><P>
Enter A: <INPUT TYPE="number" NAME="aa">
Enter B: <INPUT TYPE="number" NAME="bb">
Enter C: <INPUT TYPE="number" NAME="cc"><P>
<INPUT TYPE="button" VALUE="Enter Co-ordinates" onClick="sendVal(this.form)">
</FORM>
</center>
</body>
</html>