在 HTML5 画布中实现画笔厚度变化（示例想要在内部模拟）

Question

我希望在下面的演示中指出正确的算法方向：http://sta.sh/muro/。还有它正在使用的画布工具 - 即它是绘制线条还是绘制许多弧线等

具体来说，我想模拟画笔转动，这会导致整个“画笔笔触”更粗。请参阅图像以了解我要模拟的画笔设置。

最终，我希望创建一个在转动时厚度会变化的画笔，就像下面的行为一样。

Answer 1

为此，您需要记录按下按钮时的鼠标点。然后，您需要检查每个线段以找到方向、线的长度以及该线段的归一化向量，以便您可以对鼠标样本进行过采样。

因此，如果您有一组从鼠标处获取的点，则以下内容将获得所需的详细信息。

    for(var i = 0; i < len-1; i++){
        var p1 = line[i];
        var p2 = line[i+1];
        var nx = p2.x - p1.x;
        var ny = p2.y - p1.y;
        p1.dir = ((Math.atan2(ny,nx)%PI2)+PI2)%PI2; // get direction
        p1.len = Math.hypot(nx,ny);  // get length
        p1.nx = nx/p1.len;  // get normalised vector
        p1.ny = ny/p1.len;
    }

一旦掌握了每条线段的详细信息，根据值更改绘图参数就很简单了。

我添加了一个演示。它与我可能会费心去了解示例一样接近，因为您提供的行没有提供绘制图像所显示内容的选项。该图像显示他们也使用阴影并进行子小鼠样本采样。他们绘制的圆形框可能是一个图像，比我绘制的框要快得多。我还对线条进行了一些平滑处理，因此绘图与最终确定并设置为背景图像之间存在一点滞后。

演示的顶部是一组控制各种设置的常量。添加输入选项和审查会花费太多时间，因此如果您发现代码有用，请使用它们。

抱歉，代码很混乱，但这只是一个示例，您必须自己将其拆开。

    for(var i = 0; i < len-1; i++){
        var p1 = line[i];
        var p2 = line[i+1];
        var nx = p2.x - p1.x;
        var ny = p2.y - p1.y;
        p1.dir = ((Math.atan2(ny,nx)%PI2)+PI2)%PI2; // get direction
        p1.len = Math.hypot(nx,ny);  // get length
        p1.nx = nx/p1.len;  // get normalised vector
        p1.ny = ny/p1.len;
    }