Javascript 从事件侦听器更改时RGB颜色不更新

我正在尝试创建一个颜色变化的螺旋动画。螺旋线的颜色应根据鼠标位置进行更新，并且应仅在触发/触发

mousemove

或

touchmove

事件时更新。问题是，当页面加载时，用户移动鼠标，计算出一种颜色，然后分配给

c.strokeStyle

，然后就不会改变了。我认为这不应该发生在

console.log（“rgb（“+Math.round（r）+”，“+Math.round（g）+”，“+Math.round（b）+”）实际工作并在控制台中显示值的时候。”

。代码如下：

var canvas=document.getElementById（'canvas'）；
var c=canvas.getContext（'2d'）；
canvas.width=内部宽度；
canvas.height=内部高度；
//带有事件侦听器的鼠标和相关函数
变量鼠标={
x:未定义，
y:未定义
}
window.addEventListener（'mousemove'，函数（事件）{
mouse.x=event.x；
mouse.y=event.y；
drawSpiral（）；
})
window.addEventListener（'touchmove'，函数（事件）{
mouse.x=event.x；
mouse.y=event.y；
drawSpiral（）；
})
函数generateRGB（）{
//作为rgb处理
var r=映射范围（mouse.x，0，canvas.width，0，255）；
var g=map_范围（mouse.y，0，canvas.height，0，255）；；
var b=映射范围（mouse.x+mouse.y，0，canvas.width，0，255）；；
//log（“rgb（“+Math.round（r）+”，“+Math.round（g）+”，“+Math.round（b）+”）”）
返回“rgb”（“+Math.round（r）+”，“+Math.round（g）+”，“+Math.round（b）+”）；
}
//用于将鼠标x、y映射到0、255以获得颜色
功能映射范围（值、低1、高1、低2、高2）{
返回低2+（高2-低2）*（值-低1）/（高1-低1）；
}
//螺旋图
var距离=800；
var x=10；
变量y=10；
函数更新位置（xChange、yChange）{
x+=xChange；
y+=yChange；
}
函数drawSpiral（color=generateRGB（））{
c、 beginPath（）
//c、 fillRect（0，0，canvas.width，canvas.height）
c、 strokeStyle=颜色；
同时（距离>0）{
c、 moveTo（x，y）；
c、 lineTo（x+距离，y）；//向右移动
更新位置（距离，0）；
距离-=6；
c、 lineTo（x，y+距离）；//向下移动
更新位置（0，距离）；
c、 lineTo（x距离，y）；//向左移动
更新位置（-distance，0）；
距离-=6；
c、 lineTo（x，y-距离）；//向上移动
更新位置（0，-距离）；
c、 笔划（）；
}
c、 closePath（）；
}

方螺旋

问题在于，在第一次绘制螺旋线后，起始变量

x

、

y

和

距离

采用新值，不允许在后续调用中再次绘制螺旋线

在drawSpiral（）中，每次都需要将其重置为起始值：

执行情况见下文：

var canvas=document.getElementById（'canvas'）；
var c=canvas.getContext（'2d'）；
canvas.width=内部宽度；
canvas.height=内部高度；
//带有事件侦听器的鼠标和相关函数
变量鼠标={
x:未定义，
y:未定义
}
window.addEventListener（'mousemove'，函数（事件）{
mouse.x=event.x；
mouse.y=event.y；
drawSpiral（）；
})
window.addEventListener（'touchmove'，函数（事件）{
mouse.x=event.x；
mouse.y=event.y；
drawSpiral（）；
})
函数generateRGB（）{
//作为rgb处理
var r=映射范围（mouse.x，0，canvas.width，0，255）；
var g=map_范围（mouse.y，0，canvas.height，0，255）；；
var b=映射范围（mouse.x+mouse.y，0，canvas.width，0，255）；；
//log（“rgb（“+Math.round（r）+”，“+Math.round（g）+”，“+Math.round（b）+”）”）
返回“rgb”（“+Math.round（r）+”，“+Math.round（g）+”，“+Math.round（b）+”）；
}
//用于将鼠标x、y映射到0、255以获得颜色
功能映射范围（值、低1、高1、低2、高2）{
返回低2+（高2-低2）*（值-低1）/（高1-低1）；
}
//螺旋图
var距离=800；
var x=10；
变量y=10；
函数更新位置（xChange、yChange）{
x+=xChange；
y+=yChange；
}
函数drawSpiral（color=generateRGB（））{
c、 beginPath（）
//c、 fillRect（0，0，canvas.width，canvas.height）
c、 strokeStyle=颜色；
//*****************************************
//重置起始值
//*****************************************
距离=800；
x=10；
y=10；
//*****************************************
同时（距离>0）{
c、 moveTo（x，y）；
c、 lineTo（x+距离，y）；//向右移动
更新位置（距离，0）；
距离-=6；
c、 lineTo（x，y+距离）；//向下移动
更新位置（0，距离）；
c、 lineTo（x距离，y）；//向左移动
更新位置（-distance，0）；
距离-=6；
c、 lineTo（x，y-距离）；//向上移动
更新位置（0，-距离）；
c、 笔划（）；
}
c、 closePath（）；
}

方螺旋

因为在初始渲染之后，

距离<6

保持这种状态。哦，哇，我实际上在某一点上实现了这一点，但代码中一定有另一个bug，所以我删除了它，认为是这样的！无论如何，非常感谢你的帮助，我很感激

  // re-initialize the starting variables each time drawSpiral is run
  distance = 800;
  x= 10;
  y= 10;