2

JavaScript で HTML キャンバスに線を引くことができません。記録のために、事前に作成された線画メソッドを使用したくありません。ピクセル操作を使用して行う必要があります。これで既にデータを渡した500x500ピクセルのキャンバスに線を引いてみました

function drawBackgtoundAndLine()
{
    var cnvs = document.getElementById("cnvs");
    var cont = cnvs.getContext("2d")
    var imdt = cont.getImageData(0,0,500,500)
    //Fill canvas with a color
    for ( var i = 0 ; i < imdt.data.length ; i = i + 4)
    {
        imdt.data[i]   = 200;
        imdt.data[i+1] = 100;
        imdt.data[i+2] = 0;
        imdt.data[i+3] = 255;
    }
    //Draw a horizontal line
    var index = 0;
    for ( var c = 0 ; c < 500 ; c++)
    {
        index = (4*c)+488000;
        imdt.data[index]   = 0;
        imdt.data[index+1] = 0;
        imdt.data[index+2] = 0;
        imdt.data[index+3] = 255;
     }
     cont.putImageData( imdt , 0 , 0 )
}

このフィドルで実際にそれを見ることができます。ところで、線を引くための 2 番目の for ループを与えてくれた私の数学は、次のとおりです。245 番目の行全体に色を付けたいのです。したがって、最初の 244 行を渡すには、2000 (各行のデータ ポイントの数) に 244 行を掛けて 488000 を取得します。次に、ループを 500 回繰り返して行の各ピクセルにヒットし、488000 を加算します。右の行に移動します。245行目が黒くならないことの説明/修正をいただければ幸いです。

4

1 に答える 1