web-dev-qa-db-ja.com

JavaScriptとキャンバスでの繰り返し描画

Canvasとjavascriptを使用してHTML5ページを作成し、ページ上に一定数の間隔をあけてページ上に一定数の譜表を描画します。

私が持っているものは、キャンバスの上に10回再描画されます。本当に必要なのは、ループが描画されるたびに間隔を空けるものです。

JSFiddleを作成しようとしましたが、何も描画されません（ユーザーエラーであると確信しています）。そのため、jsファイルは次のとおりです。

window.onload = function(){

var canvas = document.getElementById('sheetmusic');
    c = canvas.getContext('2d');

c.fillStyle = 'white';
c.fillRect(0,0, canvas.width, canvas.height);

//  Draw staves
for (var i=0; i<10; i++){
    c.strokeStyle = 'black';
    c.beginPath();
    c.moveTo(0,10);
    c.lineTo(canvas.width,10);
    c.stroke();
    c.moveTo(0,20);
    c.lineTo(canvas.width,20);
    c.stroke();
    c.moveTo(0,30);
    c.lineTo(canvas.width,30);
    c.stroke();
    c.moveTo(0,40);
    c.lineTo(canvas.width,40);
    c.stroke();
    c.moveTo(0,50);
    c.lineTo(canvas.width,50);
    c.stroke();
    // staff whitespace
    c.fillStyle = 'white';
    c.fillRect(0,52, canvas.width, 50);
    }
};

私のiからloopをheightのstroke属性に追加する方法がわからないだけです。

javascripthtml5loopscanvas
3
user1248

私が何をしようとしていたのか理解した。ループを使用してコードをできるだけ簡潔にしたかったのですが、これを実現するまでにいくつかの問題が発生しました。

window.onload = draw;

function draw() {
    var canvas = document.getElementById('sheetmusic');
    var c = canvas.getContext('2d');
    var whitespace = 0;
    var ycoordinate = 10;

    //draw the staves 'x' number of times requested
    for (var x = 1; x <= 10; x++) {

        // draw the staff
        for (var i = 1; i <= 5; i++){
            c.strokeStyle = 'black';
            c.moveTo(0,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 10;
        }

        //draw white space beneath each staff
        c.fillStyle = 'white';
        c.fillRect(0,whitespace + 52,canvas.width,52);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 30;

    }
}

これで、xを必要なだけ繰り返すように設定して、JavaScriptで譜表を描画することができます。

Tgkprogで提案されているように、ループに戻っていくつかの詳細情報を調べる必要がありました。ありがとう！

Demo'able JS Fiddle at http://jsfiddle.net/ShawnCodes/K8j7u/1/

1
user1248

Xを変更する必要があります。紙の上に視覚化したり、グリッドを使ってペイントしたりするのに役立ちます。

これは上から下に線を作成します

<!DOCTYPE HTML>
        <html>
        <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <span id=dbg
    ></span>
    <br>
        <canvas id=sheetmusic  width="800" height="625"></canvas>
    <br>
    <div id=dbgD></div>

        <script language="Javascript">

    dbr =  document.getElementById('dbgD');
    function dbg(s){
    dbr.innerHTML = dbr.innerHTML + "<br>" + s
    }
    window.onload = function(){

    var canvas = document.getElementById('sheetmusic');

    c = canvas.getContext('2d');
    dbg(" canvas " + canvas + "; 2d " + c);
    //c.fillStyle = 'white';
    //c.fillRect(0,0, canvas.width, canvas.height);
    canvas.width = canvas.width //clears

    c.fillStyle = 'green';

    heightDiff = 15;
    numberLines = canvas.height / heightDiff
    //  Draw staves
    for (var i=0; i< numberLines; i++){
        c.strokeStyle = 'black';
        c.beginPath();
        c.moveTo(0,10 + (i * heightDiff));
        c.lineTo(canvas.width, 10 + (i * heightDiff));
        c.stroke();

        /*

        c.moveTo(0,20);
        c.lineTo(canvas.width,20);
        c.stroke();
        c.moveTo(0,30);
        c.lineTo(canvas.width,30);
        c.stroke();
        c.moveTo(0,40);
        c.lineTo(canvas.width,40);
        c.stroke();
        c.moveTo(0,50);
        c.lineTo(canvas.width,50);
        c.stroke();
        */

        // staff whitespace, not sure what you want to do here
        c.fillStyle = 'white';
        //c.fillRect(0,52, canvas.width, 50);
        }
    };


    </script>

ループに関するいくつかのチュートリアルとそれらの変数の使用が役立つでしょうか？ http://www.echoecho.com/javascript9.htm 音符のように見える行を作成することを除いて、何を達成したいのか正確にわかりませんか？

1
tgkprog