Javascript 将画布标记转换为HTML_Javascript_Html_Canvas_Html5 Canvas

Javascript 将画布标记转换为HTML

javascript html canvas html5-canvas

Javascript 将画布标记转换为HTML,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我有下面的代码，但我想在代码中添加一个画布。当我试图将其直接添加到中时，它给了我一个错误我是否需要为画布创建另一个表单，或者是否有其他方法将画布标记添加到html标记？第二个代码添加了canvas标记，在函数tracks（）中，我添加了一些代码来绘制一些图形。第二个代码也给出了一个错误第一个代码的说明：首先，我有一个字符串数组，比如1 c2 c4等。1是编号，而c1 c4是连接然后，我使用test（）中的split（）和substring（）从c1和c4中提取1和4 接下来，我有两个数

我有下面的代码，但我想在代码中添加一个画布。当我试图将其直接添加到

中时，它给了我一个错误

我是否需要为画布创建另一个表单，或者是否有其他方法将画布标记添加到html标记？

第二个代码添加了canvas标记，在函数

tracks（）

中，我添加了一些代码来绘制一些图形。第二个代码也给出了一个错误

第一个代码的说明：

首先，我有一个字符串数组，比如1 c2 c4等。1是编号，而c1 c4是连接

然后，我使用

test（）中的split（）
和substring（）
从c1和c4中提取1和4


接下来，我有两个数组，sbray[]
和op[]
。sbray包含左侧附加有c的所有编号，而op[]
包含右侧附加有c的编号
现在，我排序sbray[]
，首先将其保存到Obj{}
中，然后对其排序。排序后的索引保存在A[]
中。使用这些索引，我将ob[]
排序为oin[]
和op[]
排序为oup[]
。实际上，我试图先对左侧连接进行排序，然后使用该连接的索引对右侧连接进行排序
最后，我连接了各自的左侧和右侧连接，并计算了它们之间的磁道数
在第二段代码中，唯一的变化是我试图画一些矩形和线来表示轨迹和连接
    <html>
    <head>
    <title> JavaScript Array from Input</title>
    <script type="text/javascript">

    var array = new Array();
    var sbray= new Array();
    var op = new Array();
    var oup= new Array();
    var oin= new Array();

    function insert(val)
    {
        array[array.length]=val;
        show();
    }

    function show() 
    {
        var string="<b>All Element of the Array :</b><br>";
        for(i = 0; i < array.length; i++) 
        {
            string = string+array[i]+"<br>";
        }
        if(array.length > 0)
            document.getElementById('myDiv').innerHTML = string;
    }

    function display()
    {
        if(i=array.length)
            var string1="total no. of connections is "+i +"<br>";
        for(i = 0; i < array.length; i++)
        {
            var temp=array[i].split(" ");
            sbray[i]=eval(temp[1].substring(1,temp[1].length));
            op[i]=eval(temp[2].substring(1,temp[2].length));


        }
        document.getElementById('myDiv').innerHTML = string1;
    }

    function keysbyValue()
    { 
        var Ob= sbray.slice();
        var A= []; 

        for(var p in Ob)
        { 
            if(Ob.hasOwnProperty(p)) A.push([p, Ob[p]]); 
        } 
        A.sort(function(a, b)
        { 
            var a1= a[1], b1= b[1]; 
            return a1-b1; 
        }); 

        for(var k= 0, L= A.length; k<L; k++)
        { 
            A[k]= A[k][0]; 
            var tmp=A[k];
            oin[k]=Ob[tmp];
            oup[k]=op[tmp];
        }             
     } 

     function tracks()
     {
         var a=0;
         var j=0;
         var m;
         var resm= "total no. of tracks used ";
         var must="<b>All Elements of the Array :</b><br>";

         for ( m=0;m<array.length;m++)
         {
           if(oin[m+1] > oup[m])
               a++;
           else
               j++;        
         }

         if(j<6)
              continue;
         else
         {
              alert("you exceeded the no. of tracks, only 6 tracks available!");
              break;        
         }        
         must =must+array[0]+"<br />"+array[1]+"<br />"+array[2]+"<br />"+  resm +j+"<br />";
         document.getElementById('myDiv').innerHTML = must;        
    }        
    </script>        
    </head>          
    <body>          
    <h2>JavaScript Array from Input</h2>         
    <form name="form1">          
    <table width="40">          
    <tr>          
    <td width="154" align="right"><b>input</b>          
    <td width="9"><b>&nbsp;:</b>          
    <td width="224">          
    <input type="text" name="name"/>          
    </tr>          
    <tr>          
    <td width="154" align="right">          
    <td width="9">          
    <td width="224">          
    </tr>          
    <tr>          
    <td width="154" align="right">          
    <td width="9">          
    <td width="224">          
    <input type="button" Value="Add Into Array" 
     onclick="insert(this.form.name.value)"/>        
    <input type="button" Value="next" 
     onclick="display();"/>        
    <input type="button" Value="show results" 
     onclick="keysbyValue(),tracks();"/>        
    </tr>          
    </table>          
    </form>          
    <div id="myDiv"></div>          
    </body>        
    </html>


来自输入的JavaScript数组
var数组=新数组（）；
var sbray=新数组（）；
var op=新数组（）；
var-oup=新数组（）；
var oin=新数组（）；
函数插入（val）
{
数组[array.length]=val；
show（）；
}
函数show（）
{
var string=“数组的所有元素：
”；
对于（i=0；i”；
}
如果（array.length>0）
document.getElementById（'myDiv'）。innerHTML=string；
}
函数显示（）
{
if（i=array.length）
var string1=“总连接数为“+i+”
”；
对于（i=0；i”；
对于（i=0；i
您还有一个非法的“break”语句，它可能是一个返回
我将代码的这一部分重写为：
for (m = 0; m < array.length; m++) {
    if (oin[m + 1] > oup[m]) a++;
    else j++;
}

if (j > 6) {
    alert("you exceeded the no. of tracks, only 6 tracks available!");
    return;
}

for（m=0；moup[m]）a++；
else-j++；
}
如果（j>6）{
警报（“您超过了曲目数量，只有6首曲目可用！”）；
返回；
}

画布工作得很好。工作示例：提示，如果你用描述性的方式命名变量，你就不需要花一半的时间来解释你的代码，就像一般的代码注释一样。为什么要用两次非常相似的代码，或者是同一个代码？
for (m = 0; m < array.length; m++) {
    if (oin[m + 1] > oup[m]) a++;
    else j++;
}

if (j > 6) {
    alert("you exceeded the no. of tracks, only 6 tracks available!");
    return;
}