Canvas标记为HTML

时间：2012-04-16 17:40:22

标签： javascript html5 canvas html5-canvas

我有以下代码可以使用，但我想在我的代码中添加一个画布。当我尝试直接在<body>中添加它时，它会给我一个错误。

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

第二个代码添加了canvas标记，在函数tracks()中我添加了一些代码来绘制一些图形。第二个代码也会出错。

第一个代码的描述：

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

  2. 然后，我使用split()

    3. 中的substring()和test()从c1和c4中提取1和4

  3. 接下来，我有两个数组sbray[]和op[]。 sbray包含所有的号码。附加c左侧，而op[]不包含。附右边有c。

  4. 现在我先对sbray[]进行排序，先将其保存到Obj{}然后对其进行排序。排序的索引保存在A[]中。使用这些索引，我将ob[]分为oin[]和op[]分为oup[]。实际上我试图先对左边的连接进行排序，然后使用索引对正确的连接进行排序。

  5. 最后，我连接相应的左右连接并计算它们之间的曲目数。

    6. 在第二个代码中唯一的变化是我试图绘制一些矩形和线条试图表示trachs和连接。 

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

    提前致谢

1 个答案:

答案 0 :(得分：4)

你有一个＆＃34;继续＆＃34; for或switch循环之外的语句。那太糟糕了。

你也有非法的＆＃34;休息＆＃34;声明应该是一个回报。

我将这部分代码改写为：

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/

相关问题
最新问题