0

<canvas>キャンバスに譜表を描画するコードのこのセグメントが、どのブラウザーを使用していても、描画された最後の線が常に明るくなり、ほとんど消えてしまうという問題があります。

window.onload = draw;

function draw() {
    var canvas = document.getElementById('sheetmusic');
    var c = canvas.getContext('2d');
    var whitespace = 0; // pixel space between staves
    var ycoordinate = 10; // y-plot of beginning of each staff

    //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,45);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 50;

    }
}

ループを使用して線を描画したので、私が持っている解決策は、実際には最後の線をもう一度描画するだけでよいのに、各線を 1 回再描画することです。

    window.onload = draw;

    function draw() {
        var canvas = document.getElementById('sheetmusic');
        var c = canvas.getContext('2d');
        var whitespace = 0; // pixel space between staves
        var ycoordinate = 10; // y-plot of beginning of each staff

    //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();
            // this code repeats to alleviate bug with last drawn line not being defined enough
            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,45);
        whitespace = whitespace + 100;
        ycoordinate = ycoordinate + 50;

    }
}

最後の行をもう一度再描画する方法についてのアイデアはありますか?

この Web アプリの残りの部分を実装するときは、x変数をクリックしてオプションを変更する必要があることに注意してください。

4

1 に答える 1

2

lineWidthキャンバスのプロパティの基本を学ぶ必要があります..

これを見る

解決策 : ストローク幅が偶数の場合は、座標に整数を使用できます。ストローク幅が奇数の場合は、0.5 を使用して、ピクセルを正しく塗りつぶす鮮明な線を取得します。

このフィドルも見てください...

残念ながら、これに対する他の解決策はありません...これを参照してください

于 2013-04-30T04:25:10.383 に答える