Javascript 在HTML画布上绘制线性渐变路径

我正在尝试制作一个画布，它能够绘制（使用mousedown）充满颜色的路径，如下所示：

我有这段代码，但通常在我开始画图时会崩溃，可能是因为它在plotLine函数上的计算量太大了

我想知道如果可能的话，我是否可以更有效地防止撞车

//一些设置代码
var c=document.querySelector（“画布”），
ctx=c.getContext（“2d”），
颜色=[
{r:198，g:232，b:250}，
{r:249，g:213，b:228}，
{r:254，g:250，b:214}
],
cIndex=0，
maxColors=colors.length，
总计=0，
段=500，
isDown=false，
二甲苯，
py；
设置大小（）；
c、 onmousedown=c.ontouchstart=function（e）{
isDown=真；
var pos=getPos（e）；
px=位置x；
py=位置y；
};
window.onmousemove=window.ontouchmove=function（e）{
if（isDown）地块（e）；
};
window.onmouseup=window.ontouchend=function（e）{
e、 预防默认值（）；
isDown=假；
};
函数getPos（e）{
e、 预防默认值（）；
如果（e.touchs）e=e.touchs[0]；
var r=c.getBoundingClientRect（）；
返回{
x:e.clientX-r.left，
y:e.clientY-r.top
};
}
函数图（e）{
var pos=getPos（e）；
绘图线（ctx、px、py、位置x、位置y）；
px=位置x；
py=位置y；
}
功能绘图线（ctx、x1、y1、x2、y2）{
var diffX=数学绝对值（x2-x1），
diffY=数学绝对值（y2-y1），
dist=数学sqrt（diffX*diffX+diffY*diffY），
步骤=距离/50，
i=0，
T
B
x,，
Y
while（i段）{
总数=0；
如果（++cIndex>=MaxColor）cIndex=0；
}
r=c1.r+（c2.r-c1.r）*t；
g=c1.g+（c2.g-c1.g）*t；
b=c1.b+（c2.b-c1.b）*t；
返回“rgb”（“+（r | 0）+”、“+（g | 0）+”、“+（b | 0）+”）”；
}
}
window.onresize=设置大小；
函数setSize（）{
c、 宽度=window.innerWidth；
c、 高度=窗内高度；
}
document.querySelector（“按钮”）.onclick=function（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
};
html，
身体{
背景：#777；
保证金：0；
溢出：隐藏；
}
帆布{
位置：固定；
左：0；
排名：0；
背景：#333；
}
钮扣{
位置：固定；
左：10px；
顶部：10px；
}

清除功能
绘图线中的
存在
dist
和
step
为0的风险。在这种情况下，
while
循环将永远不会结束

因此，只需添加这一行：

if (!step) return;

或者，替换
我已经绘制了一段时间，没有发生崩溃：）也许第一个优化可以是从
绘图线
逻辑中取出
getColor
。通过这种方式，您可以计算循环内的颜色，而在开始之前很可能会选择颜色drawing@quirimmo我认为由于画布的小尺寸，在这里的代码片段中很少发生这种情况。当我将其应用到html页面上适当的全宽画布上时，safari和chrome上都经常出现这种情况（我试图通过css增加画布的大小，但它仍然没有崩溃。但无论如何，我已经排除了一段时间的故障。我甚至注释掉了getColor函数，它仍然适用于我。因此我想即使没有它，它仍然是一个问题。但是感谢您的输入
while (i < dist) {