Javascript 如何使用Bresenham'；s线算法？

我正在做一个游戏，我遇到了一个奇怪的问题。因此，我发现了一个JS代码，可以通过Bresenham的算法画一条线，没有plot（）函数（可能我写错了），所有这些东西都很奇怪：

由于某些原因，线条绘制的起点x、y和终点x、y是反向的

在某些情况下，如下面的代码中，我调用了函数castRay（8,0,4,4），没有画线

线不画，除了只有一个点在上帝知道的位置

我做错了什么

让ctx=canvas.getContext（“2d”）；
常数=30；
设映射=[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
ctx.fillStyle=“rgba（0,50200）”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
for（设i=0；i<10；i++）{
for（设j=0；j<10；j++）{
if（map[i][j]==1）{
ctx.fillStyle=“黑色”；
ctx.fillRect（j*瓷砖，i*瓷砖，瓷砖-1，瓷砖-1）
}
if（map[i][j]==0）{
ctx.fillStyle=“灰色”；
ctx.fillRect（j*瓷砖，i*瓷砖，瓷砖-1，瓷砖-1）
}
}
}
设绘图=（x，y）=>{
ctx.fillRect（x*瓷砖，y*瓷砖，瓷砖，瓷砖）；
返回true；
}
设castRay=（x0，y0，x1，y1）=>{
让tmp；
设陡峭=数学abs（y1-y0）>数学abs（x1-x0）；
如果（陡峭）{
tmp=x0；
x0=y0；
y0=tmp；
tmp=x1；
x1=y1；
y1=tmp；
}
设符号=1；
如果（x0>x1）{
符号=-1；
x0*=-1；
x1*=-1；
}
设dx=x1-x0；
设dy=Math.abs（y1-y0）；
设err=（（dx/2））；
设ystep=y0对于（设x=0；x我将去掉符号变量，而只是在
if（x0>x1）
条件中交换相应的变量。此外，您的线条绘制总是从x=0开始，因为您没有将其设置为x0

for (let x = 0; x <= x1; x++)

用于（让x=0；x谢谢，它现在可以工作了，但不完全像预期的那样。如果我将从4x4坐标到0x0绘制一条线，那么它将从0x0创建一条线，而不是从4x4创建一条线。但是如果我将从4x4到0x9创建一条线，它将从4x4开始，因为您的Bresenham实现没有完成。它没有覆盖所有的边缘情况。下面是一个示例在维基百科上读得不错
for (let x = x0; x <= x1; x++)