我很难用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 )
}

你可以在小提琴中看到它的作用。顺便说一句,我的数学给了我第二个for循环来画一条线:
我想给第245排涂上颜色。所以,为了传递前244行,我将2000(每行中的数据点数)乘以244行,得到488000。然后,我循环循环500次以命中行中的每个像素,然后添加488000以到达右侧行。我真的很感激你对第245行没有变黑的解释/修正。

最佳答案

您没有设置画布大小。
请注意,CSS的大小仅与显示有关,而与画布中的像素数无关。
您需要设置实际画布大小,例如:

 cnvs.width = 500;
 cnvs.height = 500;

请记住,当您设置height/width时,画布将被清除(即使值与当前大小相同),还要记住,要获得像素完美的图形,您需要保持画布大小与页面上的元素大小相同(即cnvs.offsetWidthcnvs.offsetHeight)。

09-25 16:22