Javascript 在HTML5画布中实现笔刷厚度变化（希望在内部模拟的示例）

我想在下面的演示中指出正确的算法方向。还有它正在使用的画布工具，例如，它是在画直线还是画许多圆弧，等等

具体来说，我想模拟笔刷旋转，这将导致整个“笔刷笔划”变厚。有关我要模拟的笔刷设置，请参见图像

最后，我想创建一个画笔，它在旋转时的厚度会有所不同，就像下面的行为一样

---

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

因此，如果您从鼠标中获取了一组点，下面将获得所需的详细信息

    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（变量i=0；i

一旦掌握了每条线段的详细信息，就可以根据这些值更改图形参数

我添加了一个演示。这是尽可能接近我可以麻烦得到的例子，因为你提供的线没有给你的选择，以绘制你的图像显示。图中显示，它们也使用阴影并进行鼠标下采样。他们画的圆形盒子可能是一个比我画的盒子快得多的图像。我还平滑了一点线条，因此在最终绘制和设置为背景图像之间有一点滞后

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

对不起，代码很混乱，但这只是一个例子，你必须自己把它拆开

/**hypot.js begin**/
//ES6新的数学函数hypot。平方和的平方比
var hypot=数学hypot；
if（hypop的类型===‘未定义’）{
hypot=函数（x，y）{
返回Math.sqrt（Math.pow（x，2）+Math.pow（y，2））；
}
}
/**hypot.js结束**/
//绘制选项
const SUB_SECTIONS=5；//鼠标样本之间的点
const SIZE_MULT=3；//最大尺寸乘数
const SIZE_MIN=0.1//line的最小大小
常量BIG_DIR=0.6；//最粗线的弧度方向
常数平滑_MAX=7；//在一条直线上执行的平滑步骤数。大于20将减慢渲染速度
常数形状α=0.5；//斯托克阿尔法酒店
常量形状填充α=0.75；//填充阿尔法
常数阴影α=0.1；//阴影阿尔法
常量阴影_模糊=5；//阴影模糊
常数SHADOW_OFFX=6；//shoadow of fest x和y
常数为6；
常量形状线宽度=0.6；//形状的笔划宽度。这是恒定的，不按比例缩放
const SHAPE_WIDTH=4；//形状绘制宽度；
const SHAPE_LENGTH=20；//形状拉伸长度
常量形状_取整=2；//形状圆角半径。警告如果四舍五入大于最小宽度或高度的一半，则结果无效
const SHAPE_TRAIL=0；//偏移绘制形状。负数正数在前面
var div=document.createElement（“div”）；
div.textContent=“单击并拖动鼠标进行绘制，右键单击以清除。”
文件.正文.附件（div）；
var小鼠；
var demo=function（）{
/**fullScreenCanvas.js开始**/
var canvas=（函数（）{
var canvas=document.getElementById（“canv”）；
如果（画布！==null）{
document.body.removeChild（画布）；
}
//创建具有二维上下文的空白图像
canvas=document.createElement（“canvas”）；
canvas.id=“canv”；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
canvas.style.position=“绝对”；
canvas.style.top=“0px”；
canvas.style.left=“0px”；
canvas.style.zIndex=1000；
canvas.ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
返回画布；
})();
var ctx=canvas.ctx；
/**fullScreenCanvas.js结束**/
/**mouseovell.js begin**/
如果（鼠标类型！==“未定义”）{//如果鼠标存在
if（mouse.removeMouse！==未定义）{
mouse.removeMouse（）；//删除以前的事件
}
}
var canvasMouseCallBack=未定义；//如果需要
鼠标=（函数（）{
变量鼠标={
x:0，y:0，w:0，alt:false，shift:false，ctrl:false，
interfaceId:0，ButtonLaw:0，buttonRaw:0，
over:false，//鼠标位于元素上方
bm:[1,2,4,6,5,3]，//用于设置和清除按钮原始位的掩码；
getInterfaceId:function（）{返回this.interfaceId++；}，//用于UI函数
startMouse:未定义，
mouseEvents：“mousemove、mousedown、mouseup、mouseout、mouseover、mouseweel、DOMMouseScroll”。拆分（“，”）
};
函数mouseMove（e）{
var t=e.type，m=mouse；
m、 x=e.offsetX；m.y=e.offsetY；
如果（m.x===未定义）{m.x=e.clientX；m.y=e.clientY；}
m、 alt=e.altKey；m.shift=e.shiftKey；m.ctrl=e.ctrlKey；
如果（t==“mousedown”）{m.buttonRaw |=m.bm[e.which-1]；
}如果（t==“mouseup”）{m.buttonRaw&=m.bm[e.which+2]；
}如果（t==“mouseout”）{m.buttonRaw=0；m.over=false；
}else如果（t==“mouseover”）{m.over=true；
}如果（t==“鼠标轮”）{m.w=e.wheelDelta；
}else如果（t==”DOMMouseScrol