如何将文本区域中逗号分隔的输入作为数组，使用<；帆布>；用JavaScript？
我使用Canvas标签制作了条形图，它从文本字段中获取输入值，并相应地显示图形。提供的代码 现在，我需要将textbox输入转换为单个textarea输入，该输入采用以下形式： 数值：20130,70；50,140,80;20,180,50;120,10,20 在文本框中输入“条数：”（如上图中的3）和“次数：”（4）后，转换为数组 此外，我还需要包含一个函数，该函数计算绘制这些条所需的空间，并通过某些因素相应地调整它们的宽度和它们之间的空间 有人能帮我完成这些功能吗如何将文本区域中逗号分隔的输入作为数组，使用<；帆布>；用JavaScript？,javascript,forms,canvas,multidimensional-array,textarea,Javascript,Forms,Canvas,Multidimensional Array,Textarea,我使用Canvas标签制作了条形图，它从文本字段中获取输入值，并相应地显示图形。提供的代码 现在，我需要将textbox输入转换为单个textarea输入，该输入采用以下形式： 数值：20130,70；50,140,80;20,180,50;120,10,20 在文本框中输入“条数：”（如上图中的3）和“次数：”（4）后，转换为数组 此外，我还需要包含一个函数，该函数计算绘制这些条所需的空间，并通过某些因素相应地调整它们的宽度和它们之间的空间 有人能帮我完成这些功能吗 <HTML>
<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>
垂直条形图
var帆布；
var语境；
var x=0；
var _y=0；
var_z=0；
var _a=0；
var_b=0；
var _c=0；
函数绘图（newx、newy、newz、newa、newb、newc）{
newx=x；
newy=_y；
newz=z；
newa=_a；
新生儿=_b；
newc=_c；
context.fillStyle=“#AA11FF”；
fillRect（60270,25，-newx）；
fillRect（190270,25，-newy）；
fillRect（315270,25，-newz）；
context.fillStyle=“#AAEE00”；
fillRect（85270,25，-newa）；
fillRect（215270,25，-newb）；
fillRect（340270,25，-newc）；
}
函数sendVal（form）{
_x=形式xx.值；
clearRect（0,0，canvas.width，canvas.height）；
绘制（x）；
_y=形式yy.值；
clearRect（0,0，canvas.width，canvas.height）；
绘制（_y）；
_z=形式zz.值；
clearRect（0,0，canvas.width，canvas.height）；
绘制（_z）；
_a=形式aa.值；
clearRect（0,0，canvas.width，canvas.height）；
绘制（_a）；
_b=形式bb.值；
clearRect（0,0，canvas.width，canvas.height）；
抽签(b),；
_c=形式cc值；
clearRect（0,0，canvas.width，canvas.height）；
抽签(c),；
context.strokeStyle=“#000000”；
context.beginPath（）；
上下文。moveTo（24,5）；
lineTo（24270）；
lineTo（450270）；
stroke（）；
}
window.onload=函数（）{
canvas=document.getElementById（“myCanvas”）；
context=canvas.getContext（“2d”）；
context.strokeStyle=“#000000”；
context.beginPath（）；
上下文。moveTo（24,5）；
上下文。lineTo（24271）；
lineTo（480271）；
stroke（）；
context.fillStyle=“#AA11FF”；
fillRect（60270,25，-220）；
fillRect（190270,25，-150）；
fillRect（315270,25，-55）；
context.fillStyle=“#AAEE00”；
fillRect（85270,25，-80）；
fillRect（215270,25，-120）；
fillRect（340270,25，-175）；
};
垂直条形图
您的浏览器不支持HTML5画布标记。
输入X:
输入Y:
输入Z:
输入一个：
输入B：
输入C: