HTML5 платно javascript затъмняваща четка - javascript, html5-платно, четка за четки

Трябва да създам хубава и гладка стесняваща се четка като тази:

Но имам проблем с движението на скоростта на мишката. как да накарате четката да се стеснява без зависимост от скоростта на движение на мишката. Трябва да направя изтъняване на четката, която не се различава от мишката, много бързо и бавно.

Сега с различна скорост получавам тези резултати:

    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>

Отговори:

Вместо да рисувате коничния ход с помощта mousemove, употреба mousedown за започване на нов удар и използване mouseup за да сложи край на този нов удар. Използвайте масив, за да съберете всички позиции на мишката между mousedown и mouseup.

След mouseup можете да изчислите разстоянието, което има мишкатапътували от mousedown и начертайте конусна полилиния над това разстояние. Можете да използвате линейна интерполация, за да изчислите плавен преход на lineWidth от началото до края.

Тъй като използвате интерполация, а не движения на мишката, скоростта на мишката ще бъде извадена от уравнението!

За да предоставите обратна връзка на потребителя, докато той определя линията, можете да нарисувате 1 пиксел ход по време mousemove. Тази полилиния за обратна връзка ще бъде заменена от заострената полилиния, когато освободят мишката.