0

このスクリプトは正しく表示されません。何か問題がありますか?

これには、ブラウザの表示に行がありません。for ループを使用して 2 次元直交座標系を作成していますが、コードに問題があるかどうかを知りたいです。

<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 に答える