Estoy tratando de hacer un tablero de dibujo. Estoy usando ctx.beginPath() y para suavizar los bordes agregué ctx.arc() y ctx.fill() . Pero el problema es que si muevo el mouse demasiado rápido, no se continúa dibujando la línea. Dibuja círculos con espacios entre ellos. A mayor velocidad del ratón, mayores son los espacios entre círculos. Aquí está mi código JS :
var lastX; var lastY; var mouseX; var mouseY; function handleMouseMove(e) { mouseX = parseInt(e.clientX - offsetX); mouseY = parseInt(e.clientY - offsetY); if (isMouseDown) { ctx.beginPath(); ctx.strokeStyle = x; ctx.lineWidth = y; if (mode == "pen") { //This is drawing mode (The problem is here) ctx.globalCompositeOperation = "source-over"; ctx.arc(lastX, lastY, y, 0, Math.PI * 2, false); //y is just strokes width ctx.fill(); ctx.stroke(); } else { //This is eraser ctx.globalCompositeOperation = "destination-out"; ctx.arc(lastX, lastY, 8, 0, Math.PI * 2, false); ctx.stroke(); ctx.fill(); } lastX = mouseX; lastY = mouseY; } }En lugar de dibujar un arco, dibuje una ruta con un ancho de línea
Establezca ctx.lineWidth en el radio del círculo * 2. Para los puntos finales, configure ctx.lineCap = "round" y para las esquinas, configure ctx.lineJoin = "round"
Haga clic en arrastrar en el lienzo para dibujar.
const points = []; const mouse = {x : 0, y : 0, button : false} const ctx = canvas.getContext("2d"); canvas.addEventListener("mousemove", mouseEvents); canvas.addEventListener("mousedown", mouseEvents); canvas.addEventListener("mouseup", mouseEvents); function mouseEvents(e){ mouse.x = e.pageX - 1; mouse.y = e.pageY - 1; const lb = mouse.button; mouse.button = e.type === "mousedown" ? true : e.type === "mouseup" ? false : mouse.button; if (mouse.button) { if (!lb) { points.length = 0 } points.push({x: mouse.x, y: mouse.y}); drawPoints(); } } function drawPoints() { ctx.clearRect(0,0, canvas.width, canvas.height); ctx.lineWidth = 20; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.beginPath(); for (const p of points) { ctx.lineTo(px, py); } ctx.stroke(); } canvas { position : absolute; top : 0px; left : 0px; cursor: crosshair; border: 1px solid black; } <canvas id="canvas" width="256" height="256"></canvas>