No puedo dibujar bezierCurveTo en el lienzo si el punto de inicio de moveTo y bezierCurveTo no es exactamente el mismo, es decir, 4 puntos decimales en moveTo y 6 puntos decimales en bezierCurveTo y lineWidth es más 1
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineWidth = "4" ctx.moveTo(33.7605,56.51376); ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138); ctx.stroke(); <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">Ni siquiera necesita el ctx.moveTo . Además, ctx.lineWidth debe ser un número.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 4; ctx.bezierCurveTo(33.76049625,56.51376,117.53628,247.02303,742.75229,221.65138); ctx.stroke(); <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;"> bezierCurveTo() agrega un bezier cúbico a la ruta. Un bezier cúbico tiene un punto inicial y final y dos puntos de control (un total de 4 puntos)
quadraticCurveTo() agrega un bezier cuadrático a la ruta. Un bezier cuadrático tiene un punto inicial y final y un punto de control (un total de 3 puntos)
El primer punto de ambos beziers es el último punto agregado a la ruta actual. Agregar un punto de control en los puntos de inicio o finalización causará problemas. Esto probablemente se deba al hecho de que la distancia entre el inicio o el final y el punto de control es cero y es imposible interpolar a lo largo de una línea de longitud cero.
Como solo ha dado 3 puntos únicos, supongo que desea una curva cuadrática en lugar de cúbica.
Por lo tanto, puede cambiar el código de
ctx.moveTo(33.7605,56.51376); // start point ctx.bezierCurveTo( 33.76049625, 56.51376, // control point 1 duplicated coordinate (too close) 117.53628, 247.02303, // control point 2 742.75229, 221.65138 // end point ); y usa quadraticCurveTo , como...
ctx.moveTo(33.76049625, 56.51376); // start point ctx.quadraticCurveTo( 117.53628, 247.02303, // control point 1 742.75229, 221.65138 // end point );La curva roja es una cúbica con un punto de inicio indefinido. Por lo que puedo decir sin un punto de inicio, el comportamiento no está definido.
La curva negra es una cuadrática de las 3 coordenadas de su código.
const ctx = myCanvas.getContext("2d"); ctx.lineWidth = 4; ctx.strokeStyle = "Red"; ctx.beginPath(); ctx.bezierCurveTo( 33.76049625, 56.51376, // control point 1 duplicated coordinate (too close) 117.53628, 247.02303, // control point 2 742.75229, 221.65138); // end point ctx.stroke(); ctx.strokeStyle = "Black"; ctx.beginPath(); ctx.moveTo(33.76049625, 56.51376); // start point ctx.quadraticCurveTo( 117.53628, 247.02303, // control point 1 742.75229, 221.65138); // end point ctx.stroke(); <canvas id="myCanvas" width="800" height="800" style="border:1px solid #d3d3d3;">