Javascript 是否可以更改由“绘制”绘制的线的厚度；“正交曲线”；当你沿着曲线走的时候？

我有一个画板，我用方形曲线来画所有的线和曲线，我希望当你把鼠标移动得更快的时候，线条变得更细。但是，如果我只是计算钢笔的速度，让它改变曲线的厚度，那么每条曲线都是不同的厚度，厚度不会平滑地变化。还有别的办法吗

换言之，二次曲线能否仅在设定厚度下绘制曲线，而不改变整个曲线的厚度

如果是，你能想出另一种方法来改变线条的厚度吗

下面是一个JSFIDLE：

下面是绘制曲线的代码的主要部分-

if (isMouseDown){
                        ++i;
                        X[i] = e.pageX;
                        Y[i] = e.pageY;
                               var x1 = X[i-2];
                               var y1 = Y[i-2];
                               var x2 = X[i-1];
                               var y2 = Y[i-1];
                               var x3 = X[i];
                               var y3 = Y[i];
                               var mid1x = (x1 + x2)/2;
                               var mid1y = (y1 + y2)/2;
                               var mid2x = (x2 + x3)/2;
                               var mid2y = (y2 + y3)/2;

                                var distance = Math.pow((Math.pow(mid2x-x2,2) + Math.pow(mid2y-y2,2)),2) + Math.pow((Math.pow(x2-mid1x,2) + Math.pow(y2-mid1y,2)),2);
                                var velocity = distance/2;
                              if(i>1)
                              {
                                  if (velocity<1)
                                  { drawQuadraticThreePoints("black", 10,  mid1x, mid1y, x2, y2, mid2x, mid2y);
                                  }
                                  else
                                  { drawQuadraticThreePoints("black", 10/velocity,  mid1x, mid1y, x2, y2, mid2x, mid2y);
                                  }
                              }
                          } 


function drawQuadraticThreePoints (color, thickness, x1,y1,x2,y2,x3,y3) {
  context.strokeStyle = color;
  context.lineWidth   = thickness;

  context.beginPath();
  context.moveTo(x1,y1);
  context.quadraticCurveTo(x2,y2,x3,y3);
  context.stroke();
}

if（isMouseDown）{
++一,；
X[i]=e.pageX；
Y[i]=e.pageY；
var-x1=X[i-2]；
变量y1=Y[i-2]；
var x2=X[i-1]；
变量y2=Y[i-1]；
var x3=X[i]；
var y3=Y[i]；
变量mid1x=（x1+x2）/2；
var mid1y=（y1+y2）/2；
变量mid2x=（x2+x3）/2；
var mid2y=（y2+y3）/2；
变量距离=数学功率（（数学功率（mid2x-x2,2）+数学功率（mid2y-y2,2）），2）+数学功率（（数学功率（x2-mid1x，2）+数学功率（y2-mid1y，2）），2）；
var速度=距离/2；
如果（i>1）
{
如果（velocity每个context.beginPath只能获得1个context.lineWidth设置。

这意味着您的上下文。quadraticCurveTo只能有一个线宽。

要获得一条宽度可变的线而不改变“粗”的宽度，必须将二次曲线分割成许多较小的线段

对于多个线段，您可以逐渐更改每个线段之间的线宽

以下函数沿二次曲线计算xy点

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

这些是功能的输入：


startPt、controlPt、endPt是对象：例如{x:10，y:20}
T是沿曲线从0.00到1.00的间隔
T==0.00，在测线的起点处
T==1.00，在该行的末尾

每个beginPath 1线宽的规则仍然适用，但每个曲线绘制多个线段可以提供更多的beginPath来逐渐调整线宽。
因此基本上我将替换“DrawSquadicThreePoints”用你的函数，这将给我所有的x和y点，然后我指定，例如，t==0到t==0.1，得到这两个值的x和y点，画一条线？然后对t==0.1到t==0.2做同样的事情，等等，我想我明白了-我反复使用这个函数，得到t不同值的点，然后拖动w线？是的，（1）将每条曲线分成x，y点——T=0.00，T=0.10，…，T=1.00。（2）使用逐渐变化的上下文沿曲线绘制每个线段。线宽--beginpath；moveTo；lineTo；lineWidth；stroke；沿曲线绘制更多点==更平滑的曲线和更平滑的线宽过渡。再考虑一下。将lineJoin设置为
round
以获得线段之间外观更好的过渡：ctx.lineJoin=“轮”祝你的项目好运！