HTML5画布javascript逐渐变细画笔

Question

我需要像这样创建漂亮而流畅的渐变画笔：

但我有鼠标速度移动的问题。如何使画笔逐渐变细，与鼠标移动速度无关。我需要使刷子逐渐变细，然后鼠标移动得非常快慢。

现在速度不同，我得到了这样的结果：

＆＃13;

＆＃13;

    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);
    }

＆＃13;

    canvas { border: 1px solid #ccc }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用mousemove开始新笔画并使用mousedown结束新笔画，而不是使用mouseup绘制渐变笔画。使用数组收集mousedown和mouseup之间的所有鼠标位置。

在mouseup之后，您可以计算鼠标从mousedown开始行进的距离，并在该距离上绘制锥形折线。您可以使用线性插值来计算lineWidth从开始到结束的平滑过渡。

由于您使用的是插值而非鼠标移动，因此鼠标的速度将从等式中取出！

要在用户定义线条时向用户提供反馈，您可以在mousemove期间绘制1像素笔画。当它们释放鼠标时，该反馈折线将被锥形折线覆盖。