javascript - Canvas タグを HTML に変換

Question

次のコードが機能していますが、コードにキャンバスを追加したいと考えています。直接追加しようとすると<body>、エラーが発生します。

キャンバス用に別のフォームを作成する必要がありますか、またはキャンバスタグを html タグに追加する他の方法はありますか?

2 番目のコードには canvas タグが追加されており、関数にtracks()図を描画するためのコードが追加されています。2 番目のコードでもエラーが発生します。

最初のコードの説明:

まず、1 c2 c4 などの文字列の配列があります。1 は番号です。c1 c4 は接続です。
split()次に、 and substring()inを使用して、c1 と c4 から 1 と 4 を抽出します。test()
次に、2 つの配列sbray[]とop[]. sbray にはすべての no が含まれています。左側に c が追加され、op[]no が含まれています。右側に c が追加されます。
今、私sbray[]は最初にそれをに保存してからObj{}ソートすることでソートします。ソートされたインデックスはに保存されA[]ます。これらのインデックスを使用して、とに分類ob[]します。実際には、最初に左の接続をソートし、そのインデックスを使用して右の接続をソートしようとしています。oin[]op[]oup[]
最後に、左右の接続をそれぞれ接続し、それらの間のトラックの数を数えます。

2 番目のコードでの唯一の変更点は、いくつかの長方形と線を描画して、溝と接続を表現しようとしていることです。

    <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ループの外側に「continue」ステートメントがあります。それは良くないね。

また、おそらくリターンとなるはずの違法な「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;
}

そして、キャンバスはうまく機能します。実例： http： //jsfiddle.net/AcWU7/

javascript - Canvas タグを HTML に変換

1 に答える 1

Related

Reference