HTML5画布javascript逐渐变细画笔

Question

I need create nice and smooth tapering brush like this:

But i have problem with mouse speed movement. how to make brush tapering no dependency with mouse movement speed. I need make brush tapering which not different then mouse move very fast and slow.

Now with diferrent speed i get this results:

  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

Instead of drawing the tapered stroke using mousemove , use mousedown to start a new stroke and use mouseup to end that new stroke. Use an array to collect all the mouse positions between mousedown and mouseup.

After mouseup you can calculate the distance the mouse has traveled since mousedown and draw a tapered polyline over that distance. You can use linear interpolation to calculate a smooth transition of the lineWidth from start to end.

Since you're using interpolation rather than mousemoves, the speed of the mouse will be taken out of the equation!

To provide feedback to the user as they are defining the line, you can draw a 1 pixel stroke during mousemove . This feedback polyline will be overwritten by the tapered polyline when they release the mouse.