javascript - 将画布标签转换为 HTML

Question

我有以下代码工作，但我想在我的代码中添加一个画布。当我尝试将它直接添加到它时，<body>它给了我一个错误。

我需要为画布创建另一个表单还是有其他方法可以将画布标记添加到 html 标记？

第二个代码添加了画布标签，在函数中tracks()我添加了一些代码来绘制一些图形。第二个代码也给出了错误。

第一段代码说明：

首先，我有一个字符串数组，比如 1 c2 c4 等。1 是第一个。而 c1 c4 是连接。
split()然后，我使用and substring()in从 c1 和 c4 中提取 1 和 4test()
接下来，我有两个数组，sbray[]并且op[]. sbray 包含所有的没有。在左侧附加 c，而op[]包含 no。在右侧附加 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调用它的方式存在一些错误。

<!DOCTYPE html>
<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>";

    //here I have added the canvas code.
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FFFF00";
    ctx.fillRect(0,0,1000,75);
    ctx.fillStyle = '#003300';
    ctx.font = 'bold 20px ariel';
    ctx.textBaseline = 'bottom';
    ctx.fillText('1', 5, 115);
    ctx.fillText('2', 5, 145);
    ctx.fillText('3', 5, 175);
    ctx.fillText('4', 5, 205);
    ctx.fillText('5', 5, 235);
    ctx.fillText('6', 5, 265);    
    ctx.fillStyle = '#003300';
    ctx.font = 'bold 30px ariel';
    ctx.textBaseline = 'bottom';
    ctx.fillText('1', 15, 50);
    ctx.fillText('2', 65, 50);
    ctx.fillText('3', 115,50);
    ctx.fillText('4', 165, 50);
    ctx.fillText('5', 215, 50);
    ctx.fillText('6', 265, 50);
    ctx.fillText('7', 315, 50);
    ctx.fillText('8', 365, 50);
    ctx.fillText('9', 415, 50);
    ctx.fillText('10', 460, 50);
    ctx.fillText('11', 510, 50);
    ctx.fillText('12', 560, 50);
    ctx.fillText('13', 610, 50);
    ctx.fillText('14', 660, 50);
    ctx.fillText('15', 710, 50);
    ctx.fillText('16', 760, 50);
    ctx.fillText('17', 810, 50);
    ctx.fillText('18', 860, 50);
    ctx.fillText('19', 910, 50);
    ctx.fillText('20', 960, 50);

    ctx.beginPath();
    ctx.moveTo(0,75);
    ctx.lineTo(1000,75);
    ctx.stroke();
    for(var i=50;i<1050;i=i+50)
    {
        ctx.moveTo(i,0);
        ctx.lineTo(i,75);
        ctx.stroke();
    }   
    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>    
<canvas id="myCanvas" width="1000" height="300" style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>         
</body>    
</html>

提前致谢

score 4 · Accepted Answer

您在 for 或 switch 循环之外有一个“继续”语句。那很糟。

您还有一个非法的“中断”声明，可能应该是一个回报。

我将您的代码的那部分重写为：

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

画布工作得很好。工作示例：http: //jsfiddle.net/AcWU7/

javascript - 将画布标签转换为 HTML

1 回答 1

Related

Reference