HTML5 canvas 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 之后，您可以计算自 mousedown 以来鼠标移动的距离，并在该距离上绘制一条锥形多段线。您可以使用线性插值来计算 lineWidth 从开始到结束的平滑过渡。

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

为了在用户定义线条时向他们提供反馈，您可以在 mousemove 期间绘制 1 像素的描边。当他们释放鼠标时，此反馈折线将被锥形折线覆盖。

HTML5 canvas javascript 锥形刷

HTML5 canvas javascript tapering brush

javascript

drawingbrush

html5-canvas