javascript - 无法在 Canvas 上画线

Question

我无法使用 JavaScript 在 HTML Canvas 上绘制线条。作为记录，我不想使用任何预先编写的线条绘制方法，我需要使用像素操作来完成。我尝试在 500x500 像素的 Canvas 上画一条线，我已经为此提供了数据

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 )
}

您可以在 this 中看到它的实际效果 fiddle 。顺便说一句，我的数学给了我第二个 for 循环来画一条线是:我想给整个第 245 行上色。因此，为了传递前 244 行，我将 2000(每行中的数据点数)乘以 244 行得到 488000。然后我循环 500 次循环以命中该行中的每个像素，并添加 488000到达正确的行。对于第 245 行没有变黑的解释/修复，我真的很感激。

Answer 1

您没有设置 Canvas 大小。

请注意，CSS 大小仅与显示有关，与 Canvas 中的像素数无关。

您需要设置真实的 Canvas 大小，例如:

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

请记住，当您设置height/width时， Canvas 会被清除(即使该值与当前大小相同)，还要记住获取像素- 完美的图形，您需要保持 Canvas 大小与页面上的元素大小相同(即 cnvs.offsetWidth 和 cnvs.offsetHeight)。