Javascript 在HTML画布上填充某些像素

首先，很抱歉这个糟糕的标题，我想不出更好的方式来描述我想做的事情。我有一个HTML画布，为了便于讨论，它是x像素宽，y像素高。我一直在尝试编写一个代码，获取画布图像数据数组中位于z和z+1行的两个像素的位置，并将两个像素之间较高行中的所有像素填充为特定颜色。恐怕我没什么道理，所以这里有一张图表：

对于糟糕的图形表示抱歉，但假设每个矩形都是一个像素。程序应该为每个黑色像素取第一个值（每个像素存储为r、g、b、a，程序获取代表画布图像数据的数组中r的位置），并将较低像素的r值存储为

bottomPixel

，将较高像素的r值存储为

topPixel

。在这种情况下，

bottomPixel=124

和

topPixel=112

应使用此选项将两个基本像素之间的所有像素填充为特定颜色。例如，使用前面的像素位置，下图中的红色像素应上色，但蓝色像素不应上色

下面是我的代码：（假设画布有一个Id“canvas”，宽6像素，高10像素）

var cnvs=document.getElementById（“Canvas”）；
cnvs.高度=10//这里以高度和宽度为例。
cnvs.width=6；
var cont=cnvs.getContext（“2d”）；
var环境=cont.getImageData（0,0,6,10）；
var-bottomPixel=124//不一定是124或112，只是示例值
var-topPixel=112；
if（bottomPixel-topPixel>6*4）//如果bottomPixel位于topPixel的右侧
{
对于（变量i=0；i<（（底部像素-6*4）-topPixel）/4；i++）
{
var指数=topPixel+i*4；
环境.数据[索引]=0；
环境.数据[索引+1]=255；
环境.数据[索引+2]=0；
环境.数据[索引+3]=255；
}
}
if（bottomPixel-topPixel>6*4）//如果bottomPixel位于topPixel的左侧
{
对于（var i=0；i<（topPixel-（bottomPixel-6*4））/4；i++）
{
var指数=topPixel-i*4；
环境.数据[索引]=0；
环境.数据[索引+1]=255；
环境.数据[索引+2]=0；
环境.数据[索引+3]=255；
}
}

---

我想知道为什么我的代码没有执行我之前描述的操作。如果这里有任何需要澄清的地方，请留下评论。谢谢

这是一种在点坐标上工作并使用setPixel函数修改图像数据的方法。我用蓝色作为开始，黑色作为结束。您需要根据具体情况进行调整，但可以使用setPixel对imageData进行直接的x和y编辑

更新

我已经包括了一个替代的线方法和你的线方法。还有一个动画将帮助您查找错误

函数pIndex（p，w）{
回报率（（p.x|0）+（p.y|0）*w））*4；
}
函数设置像素（p、w、d、rgba）{
var i=ptIndex（p，w）；
d[i]=rgba.r；
d[i+1]=rgba.g；
d[i+2]=rgba.b；
d[i+3]=rgba.a；
}
功能线（p1、p2、w、d、rgba）{
var cnvs=document.getElementById（“画布”）；
var bottomPixel=pIndex（p1，w）；
var topPixel=pIndex（p2，w）
if（bottomPixel-topPixel>w*4）//如果bottomPixel位于topPixel的右侧
{
对于（var i=0；i<（（底部像素-w*4）-topPixel）/4；i++）{
var指数=topPixel+i*4；
d[指数]=rgba.r；
d[指数+1]=rgba.g；
d[指数+2]=rgba.b；
d[指数+3]=rgba.a
}
}
if（bottomPixel-topPixel>w*4）//如果bottomPixel位于topPixel的左侧
{
对于（var i=0；i<（topPixel-（bottomPixel-w*4））/4；i++）{
var指数=topPixel-i*4；
d[指数]=rgba.r；
d[指数+1]=rgba.g；
d[指数+2]=rgba.b；
d[指数+3]=rgba.a
}
}
}
函数drawRandPoints（）{
var cnvs=document.getElementById（“画布”）；
var cont=cnvs.getContext（“2d”）；
//鬼魂最后抽签
cont.fillStyle=“白色”；
cont.fillRect（0，0，cnvs.宽度，cnvs.高度）；
//获取图像数据
var环境=cont.getImageData（0，0，cnvs.width，cnvs.height）；
var d=环境数据，w=cnvs.宽度；
//创造色彩
黑色变量={
r:0，
g:0，
b:0，
a:255
};
变量红色={
r:255，
g:0，
b:0，
a:255
};
蓝色变量={
r:0，
g:0，
b:255，
a:255
};
var帧=0；
变量p1={x:（（cnvs.width/2 | 0）），y:0，sx:1，sy:0}；
变量p2={x:cnvs.width，y:（（cnvs.height/2）| 0），sx:-1，sy:0}；
功能步骤（p）{
如果（p.x>cnvs.宽度）{
p、 x=cnvs.宽度；
p、 sx=0；
p、 sy=1；
}
如果（p.y>cnvs.高度）{
p、 y=cnvs高度；
p、 sy=0；
p、 sx=-1；
}
如果（p.x<0）{
p、 x=0；
p、 sx=0；
p、 sy=-1；
}
如果（p.y<0）{
p、 y=0；
p、 sy=0；
p、 sx=1；
}
}
函数ani（）{
cont.fillStyle=“白色”；
cont.fillRect（0，0，cnvs.宽度，cnvs.高度）；
环境=cont.getImageData（0，0，cnvs.width，cnvs.height）；
d=环境数据；
步骤（p1）；
步骤（p2）；
变量p3={
x:cnvs.width-p1.x，
y:cnvs.height-p2.y
};
变量p4={
x:cnvs.width-p2.x，
y:cnvs高度-p1.y
};
yourLine（p1，p2，w，d，{r:0，g:255，b:0，a:255}）；
myDrawLine（p1、p2、w、d、红色）；
抽绳无磨损（p3、p4、w、d、蓝色）；
设置像素（p1、w、d、黑色）；
设置像素（p2、w、d、黑色）；
帧数%=12；
p1.x+=p1.sx；
p1.y+=p1.sy；
p2.x+=p2.sx；
p2.y+=p2.sy；
//将像素数据放在画布上。
cont.putImageData（环境，0,0）；
请求动画帧（ani）；
}
ani（）；
}
功能myDrawLine（p1、p2、w、d、rgba）{
//获取x或y之间的最大长度
var lenX=Math.abs（p1.x-p2.x）；
var lenY=数学绝对值（p1.y-p2.y）；
瓦伦
var cnvs        = document.getElementById("Canvas");
cnvs.height     = 10; //This height and width is here as an example.
cnvs.width      = 6;
var cont        = cnvs.getContext("2d");
var environment = cont.getImageData(0,0,6,10);
var bottomPixel = 124;//Not neccesarily 124 or 112, just example values
var topPixel    = 112;
if ( bottomPixel - topPixel > 6*4 ) //If bottomPixel is to the right of topPixel
{
   for ( var i = 0 ; i < ((bottomPixel-6*4)-topPixel)/4 ; i++ )
   {
      var index = topPixel + i * 4;
      environment.data[index]      = 0;
      environment.data[index + 1 ] = 255;
      environment.data[index + 2 ] = 0;
      environment.data[index + 3 ] = 255;
   }
}
if ( bottomPixel - topPixel > 6*4 ) //If bottomPixel is to the left of topPixel
{
   for ( var i = 0 ; i < (topPixel-(bottomPixel-6*4))/4; i++ )
   {
      var index = topPixel - i * 4;
      environment.data[index]      = 0;
      environment.data[index + 1 ] = 255;
      environment.data[index + 2 ] = 0;
      environment.data[index + 3 ] = 255;
   }
}