HTML5画布javascript锥形笔刷

我需要创建漂亮平滑的锥形笔刷，如下所示：

但是我对鼠标的移动速度有问题。如何使画笔变细与鼠标移动速度无关。我需要使刷子逐渐变细，这和鼠标移动得又快又慢没什么两样

现在，通过不同的速度，我得到了以下结果：

var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
var isDrawing，最后一点；
ctx.线宽=20；
el.onmousedown=函数（e）{
isDrawing=true；
lastPoint={x:e.clientX，y:e.clientY}；
ctx.线宽=20；
};
el.onmousemove=功能（e）{
如果（！isDrawing）返回；
ctx.lineJoin=“圆形”；
ctx.lineCap=“对接”；
ctx.strokeStyle=“#000000”；
ctx.globalAlpha=“1”；
ctx.globalCompositeOperation=“源代码结束”；
如果（ctx.lineWidth>=5）{
ctx.线宽-=0.1；
}
var currentPoint={x:e.clientX，y:e.clientY}；
ctx.beginPath（）；
移动到（lastPoint.x，lastPoint.y）；
ctx.lineTo（currentPoint.x，currentPoint.y）；
ctx.closePath（）；
ctx.stroke（）；
lastPoint=currentPoint；
};
el.onmouseup=函数（）{
isDrawing=false；
};
函数clearit（）{
ctx.clearRect（0,0,1000,1000）；
}

canvas{border:1px solid#ccc}

---

不要使用

mousemove

绘制锥形笔划，而是使用

mousedown

开始新笔划，并使用

mouseup

结束新笔划。使用数组收集mousedown和mouseup之间的所有鼠标位置

在

mouseup

之后，您可以计算鼠标向下移动后的移动距离，并在该距离上绘制一条锥形多段线。可以使用线性插值计算线宽从起点到终点的平滑过渡

由于您使用的是插值而不是鼠标移动，鼠标的速度将从等式中扣除

---

要在用户定义线条时向其提供反馈，您可以在

mousemove

期间绘制一个1像素的笔划。当他们释放鼠标时，此反馈多段线将被锥形多段线覆盖。

虽然需要重新设计一些代码并且有点棘手，但我敢打赌这是获得所需结果的唯一方法。