使用javascript的bresenham行算法

我正在尝试为一行实现bresenham算法 以下是我所做的：

https://jsfiddle.net/noatendler/u2vnz5La/1/

由于某种原因，这条线不在我按下的确切位置 我检查了一下算法，它看起来很好。。我从showCoords（）函数中得到的要点也可以

我知道这比

http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript

但我想知道我错在哪里

---

有人知道为什么线有时不直到点击点吗

您需要考虑边距、边框和偏移量大小

var c=document.getElementById（“myCanvas”）；
//动态添加单击事件以实现浏览器兼容性
c、 addEventListener（'click'，showCoords）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
变量x1、y1、x2、y2；
var isFirst=0；
函数getRealPosX（clientX）{
//如果有边框，请将其删除
if（c.样式['border-left-width']）{
//由于边框大小末尾有“px”，请删除非数字
clientX-=parseInt（c.style['border-left-width'].replace（/[^0-9\.]/g'，），10）；
}
//如果是空白，请将其删除
if（c.style.marginLeft）{
//由于页边距大小末尾有“px”，请删除非数字
clientX-=parseInt（c.style.marginLeft.replace（/[^0-9\.]/g'，），10）；
}
//如果偏移，请将其删除
如果（c.offsetLeft）{
clientX-=c.offsetLeft；
}
返回clientX；
}
函数getRealPosY（clientY）{
如果（c.style['border-top-width']）{
clientY-=parseInt（c.style['border-top-width'].replace（/[^0-9\.]/g'，），10）；
}
如果（c.样式marginTop）{
clientY-=parseInt（c.style.marginTop.replace（/[^0-9\.]/g'，），10）；
}
if（c.offsetTop）{
clientY-=c.offsetTop
}
返回客户；
}
函数showCoords（事件）{
//如果是第一次单击保存x1、y1
如果（isFirst==0）{
x1=getRealPosX（event.clientX）；
y1=getRealPosY（event.clientY）；
isFirst=1；
}
//如果是第二次单击保存x2、y2
否则{
x2=getRealPosX（event.clientX）；
y2=getRealPosY（event.clientY）；
//控制台日志（“x1:+x1+”y1:+y1）；
//控制台日志（“x2:+x2+”y2:+y2）；
图纸（x1，y1，x2，y2）；
//x1=0；x2=0；y1=0；y2=0；
isFirst=0；//将其设置为0，以便下一次单击为x1，y1
}
}
函数绘图（x1、y1、x2、y2）{
//如果是同一点
如果（x1==x2&&y1==y2）{
ctx.fillRect（x1，y1，1，1）；
返回；
}
var dx=x2-x1；
var dy=y2-y1；
var steps=Math.max（Math.abs（dx）、Math.abs（dy））；
var Xincrement=dx/步；
var Yincrement=dy/步；
//控制台日志（“Xincrement:+Xincrement+”Yincrement:+Yincrement）；
var x=x1，
y=y1；
对于（var v=0；v

---

您并不是真正在使用Bresenhams算法，而是您自己的想法。Bresenham aölgorithm的要点是它处理整数，这比添加浮点数更快更精确。@user193239，我编辑代码以获得更好的浏览器兼容性（动态添加事件）