javascript - HTML5 画布 javascript 锥形笔刷

Question

我需要像这样创建漂亮而光滑的锥形刷：

但我有鼠标速度移动的问题。如何使笔刷逐渐变细不依赖于鼠标移动速度。我需要使刷子逐渐变细，然后鼠标移动得非常快和慢。

现在以不同的速度我得到这个结果：

    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    var isDrawing, lastPoint;
    ctx.lineWidth = 20; 

    el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
        ctx.lineWidth = 20;
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        ctx.lineJoin = "round";
        ctx.lineCap = "butt";
        ctx.strokeStyle = "#000000"; 
        ctx.globalAlpha = "1"; 
        
        ctx.globalCompositeOperation = "source-over"; 
        if(ctx.lineWidth >= 5) {   
            ctx.lineWidth -= 0.1;
        }

        var currentPoint = { x: e.clientX, y: e.clientY };

        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(currentPoint.x, currentPoint.y);
        ctx.closePath();
        ctx.stroke();

        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
    };

    function clearit() {
        ctx.clearRect(0,0, 1000, 1000);
    }

    canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="500"></canvas>

Answer 1

不要使用 绘制锥形笔划mousemove，而是使用mousedown开始新笔划并使用mouseup结束该新笔划。使用数组来收集 mousedown 和 mouseup 之间的所有鼠标位置。

在mouseup您可以计算出鼠标从鼠标按下后移动的距离并在该距离上绘制一条锥形折线。您可以使用线性插值来计算 lineWidth 从开始到结束的平滑过渡。

由于您使用的是插值而不是鼠标移动，因此鼠标的速度将被排除在等式之外！

为了在用户定义线条时向他们提供反馈，您可以在mousemove. 当他们释放鼠标时，这条反馈折线将被锥形折线覆盖。