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行目が黒くならないことの説明/修正をいただければ幸いです。