canvas html 5并显示

此脚本显示不正确，是否有什么问题？canvas html 5并显示

这在浏览器的显示中缺少行。我正在使用for循环来创建一个二维直角坐标系，并想知道代码是否有错误。

<html> 
<head> 

<script type="text/javascript"> 

function start() { 

    var winwidth = window.innerWidth; 
    var winheight = window.innerHeight; 
    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 
    // Sets size of canvas and interior of canvas to window 
    ctx.canvas.width = 1200; 
    ctx.canvas.height = 600; 
    var cname = "ctx"; 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#ff0000'; 
    // Origin Y-Axis 
    ctx.moveTo(0,300); 
    ctx.lineTo(1200,300); 
    // Origin X-Axis 
    ctx.moveTo(600,0); 
    ctx.lineTo(600,600); 
    ctx.stroke(); 
    // ------------------------------------------- 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 0.5; 
    ctx.strokeStyle = '#0000ff'; 
    majoraxes = new Array(); 
    j=0; 
    // Horizontal Major Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     // Skips past 300 
     if (hundreth==3) { 
      hundreth=4; 
      } 
     for (c=0; c<2; c++) { 
      if (c==0) { 
       majoraxes[j] = cname+".moveTo(0,"+hundreth+"00);"; 
       j = j+1; 
       } 
      if (c==1) { 
       majoraxes[j] = cname+".lineTo(1200,"+hundreth+"00);"; 
       j = j+1; 
       } 
      } 
     } 
    // Vertical Major Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     // Skips past 600 
     if (hundreth==6) { 
      hundreth=7; 
      } 
     for (c=0; c<2; c++) { 
      if (c==0) { 
       majoraxes[j] = cname+".moveTo("+hundreth+"00,0);"; 
       j = j+1; 
       } 
      if (c==1) { 
       majoraxes[j] = cname+".lineTo("+hundreth+"00,600);"; 
       j = j+1; 
       } 
      } 
     } 
    for (t=0; t < majoraxes.length; t++) { 
     eval(majoraxes[t]); 
     } 
    ctx.stroke(); 
    // --------------------------------------- 


    // --------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = .2; 
    ctx.strokeStyle = '#0000ff'; 
    minoraxes = new Array(); 
    j=0; 
    // Horizontal Minor Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     for (tenth=1; tenth<10; tenth++) { 
      for (c=0; c<2; c++) { 
       if (c==0) { 
        minoraxes[j] = cname+".moveTo(0,"+hundreth+""+tenth+"0);"; 
        j = j+1; 
        } 
       if (c==1) { 
        minoraxes[j] = cname+".lineTo(1200,"+hundreth+""+tenth+"0);"; 
        j = j+1; 
        } 
       } 
      } 
     } 
    // Vertical Minor Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     for (tenth=1; tenth<10; tenth++) { 
      for (c=0; c<2; c++) { 
       if (c==0) { 
        minoraxes[j] = cname+".moveTo("+hundreth+""+tenth+"0,0);"; 
        j = j+1; 
        } 
       if (c==1) { 
        minoraxes[j] = cname+".lineTo("+hundreth+""+tenth+"0,600);"; 
        j = j+1; 
        } 
       } 
      } 
     } 
    for (t=0; t < minoraxes.length; t++) { 
     eval(minoraxes[t]); 
     } 
    ctx.stroke(); 
    // -------------------------------------- 

    } 

</script> 

<style type="text/css"> 
html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
} 
#myCanvas { 
    width:1200; 
    height:600; 
    image-rendering:optimize-contrast; 
} 
</style> 
</head> 
<body onload="start()"> 

<canvas id="myCanvas" style="border:1px solid #c3c3c3;"> 
Your browser does not support the canvas element. 
</canvas> 


</body> 
</html>

来源

2012-07-10 user1516251

看起来你没有画出足够的线条。你可以在你的版本中改变它们以使其工作。

// Horizontal Minor Axes 
    for (hundreth=0; hundreth<7; hundreth++) { 
     for (tenth=1; tenth<12; tenth++) { // changed to 12 

    // Vertical Minor Axes 
    for (hundreth=0; hundreth<13; hundreth++) { 
     for (tenth=1; tenth<12; tenth++) { // changed to 12

说实话，虽然你真的可以真的缩短代码，但请检查一下。我还在功能中添加了任意大小的网格。

Working Demo

Full screen demo

function start() { 
    var winwidth = window.innerWidth; 
    var winheight = window.innerHeight; 
    var canvas=document.getElementById("myCanvas"); 
    var ctx=canvas.getContext("2d"); 
    // Sets size of canvas and interior of canvas to window 
    var width = 1200, 
     height = 600; 

    canvas.width = width; 
    canvas.height = height; 

    var cname = "ctx"; 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#ff0000'; 
    // Origin X-Axis 
    ctx.moveTo(0,height/2); 
    ctx.lineTo(width,height/2); 
    // Origin Y-Axis 
    ctx.moveTo(width/2,0); 
    ctx.lineTo(width/2,height); 
    ctx.stroke(); 
    // ------------------------------------------- 

    // ------------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = 0.5; 
    ctx.strokeStyle = '#0000ff'; 
    majoraxes = new Array(); 
    j=0; 

    for(var hundreth = 0; hundreth < height/100; hundreth++){ 
     if(hundreth !== (height/2)/100){ 
      ctx.moveTo(0,hundreth*100); 
      ctx.lineTo(width, hundreth*100); 
     } 
    } 

    // Vertical Major Axes 
    for (hundreth=0; hundreth < width/100; hundreth++) { 
     if(hundreth !== (width/2)/100){ 
      ctx.moveTo(hundreth*100, 0); 
      ctx.lineTo(hundreth*100,height); 
     } 
    } 

    ctx.stroke(); 
    // --------------------------------------- 

    // --------------------------------------- 
    ctx.beginPath(); 
    ctx.lineWidth = .2; 
    ctx.strokeStyle = '#0000ff'; 
    minoraxes = new Array(); 
    j=0; 

    for(var tenth= 0; tenth< height/10; tenth++){ 
     ctx.moveTo(0,tenth*10); 
     ctx.lineTo(width, tenth*10); 
    } 

    // Vertical Major Axes 
    for (tenth=0; tenth< width/10; tenth++) { 
     ctx.moveTo(tenth*10, 0); 
     ctx.lineTo(tenth*10,height); 
    } 

    ctx.stroke(); 
    // -------------------------------------- 
}

来源

2012-07-11 00:55:14 Loktar

谢谢你，那工作 – user1516251 2012-07-11 01:27:08

@ user1516251真棒，你可以选择它作为选择的答案和/或给予好评呢？ – Loktar 2012-07-11 04:20:22

canvas html 5并显示

回答

相关问题