Entonces tengo un lienzo y estoy tratando de implementar una función de dibujo suave. Primero usé líneas en lugar de puntos para resolver el problema de los espacios entre los puntos de dibujo cuando el usuario dibuja demasiado rápido. Este es mi violín .

La función de dibujo central está en el bucle:

 if (state.mouse.on) { ctx.beginPath(); ctx.strokeStyle = 'red'; ctx.lineWidth = 2; ctx.moveTo( state.last.x ? state.last.x : state.mouse.x, state.last.y ? state.last.y : state.mouse.y ); ctx.lineTo(state.mouse.x, state.mouse.y); ctx.stroke(); state.last = { x: state.mouse.x, y: state.mouse.y }; }

El problema es que, si dibuja demasiado rápido y con curvas (es decir, intenta dibujar un círculo lo más rápido que pueda), puede ver que las líneas no son lo suficientemente "curvas", por supuesto, porque el bucle se ejecuta tantas veces como el navegador vamos, y puede que no sea suficiente para suavizar las líneas.

Entonces, ¿hay alguna manera de resolver esto? Intenté usar la función bezier y almacenar las últimas posiciones del mouse y luego ejecutar la función, pero solo crea líneas onduladas jajaja.

No soy bueno en matemáticas, así que realmente no puedo hablar, pero creo que necesito algún tipo de función de interpolación.