0

这个脚本不能正常显示，是不是有什么问题？

这在浏览器的显示中缺少行。我正在使用 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>
4

1 回答 1

0

看起来你没有画足够的线。您可以在您的版本中更改这些以使其正常工作。

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

老实说，尽管您确实可以大大缩短代码，但请检查一下。我还添加了使网格成为您想要的任何大小的功能。

工作演示

全屏演示

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();
    // --------------------------------------
}

​</p>

于 2012-07-11T00:55:14.970 回答