Javascript 算术的奇怪问题（？）

背景：我正在开发一个用于创建“低分辨率”显示的库

现在我想用一个简单的演示来测试它——它应该在光标周围画一个径向梯度

我想我算对了，它还在运行，除非你把鼠标移到左下角

我试着打印号码，改变顺序等等，但是找不到原因

这里还有一把小提琴：

var size=16；//像素数
var lo=新知识（“#板”，大小，大小）；
//绘图功能
setInterval（函数（）{
//鼠笼
var m_x=lo.mouse.x；
var m_y=lo.mouse.y；
//打印鼠标在哪里-用于调试
console.log（m_x+”，“+m_y）；
//对于屏幕上的所有像素
对于（变量x=0；x0；j--）{
var celllem=document.createElement（'div'）；
celllem.dataset.x=j；
附肢儿童（celllem）；
行推（celllem）；
}
frag.appendChild（罗维伦）；
此.grid.push（行）；
}
这是boardElem.appendChild（frag）；
console.log（'yo'）；
var self=这个；
//添加鼠标侦听器
document.addEventListener（'mousemove'，函数（e）{
var rect=self.boardElem.getBoundingClientRect（）；
var x=（self.width*（e.clientX-rect.left））/rect.width；
变量y=（self.height*（e.clientY-rect.top））/rect.height；
self.mouse.x=Math.floor（x）；
self.mouse.y=Math.floor（y）；
self.mouse.inside=（x>=0&&x=0&&y=this.width | | y<0 | | y>=this.height）返回；
此.grid[y][x].style.backgroundColor=color；
};
#board{
保证金：0自动；
宽度：128px；
高度：128px；
外形：1px纯黑；
}
#董事会>分区：第n个子（奇数）>分区：第n个子（奇数）{
背景：#eee
}
#线路板>分区：第n个孩子（偶数）>分区：第n个孩子（偶数）{
背景：#eee
}
.lores屏幕{
显示：块；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.lores屏幕，.lores屏幕*{
空白：nowrap；
填充：0；
}
.lores屏幕*{
保证金：0
}
.lores屏幕>分区{
显示：块；
}
.lores屏幕>分区>分区{
显示：内联块；
垂直对齐：顶部；
身高：100%；
}
问题在于您的
if
语句中有一个简单的输入错误。在第一个分支的
集合中，x和y混合在一起。话虽如此，我们可以完全取消该分支。一个简单的
Math.max（0，…）
将默认为黑色

更改以下内容：

var color = 255 - Math.floor((255 / size) * distance);

// set color
if (color < 0) {
    lo.set(y, x, 'black');
} else {
    lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}

改变

// set color
if (color < 0) {
    lo.set(y, x, 'black');
} else {
    lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}

考虑使用而不是
setInterval
来提高效率。我知道，这只是为了测试。但你走对了方向。我建议：
var color=Math.max（0255个Math.floor（（255个/尺寸）*距离））好，但为什么我的代码不起作用？如果下面的问题已经解决了，我会接受的，但解决方案确实在注释中：）。答案是通过使用error@MightyPork它不起作用，因为你在if语句的第一部分中把x和y混淆了。将其更改为lo.set（x，y，‘黑色’）；工作！：）@MichalCanecky我不同意：（255/尺寸）是每一像素距离的“颜色下降”，我将其乘以距离。
// set color
if (color < 0) {
    lo.set(y, x, 'black');
} else {
    lo.set(x, y, 'rgb(' + color + ', 0, 0)');
}

// set color
lo.set(x, y, 'rgb(' + Math.max(color, 0) + ', 0, 0)');