Estoy creando un juego en el que necesito mostrar un barco que atraviesa un río que fluye. Estoy creando un río con curvas bezier, pero solo tiene 3 puntos de control desde bezerCurveTo . Entonces, el río no es 'lo suficientemente curvo'. ¿Cómo puedo hacer para lograr esto?
La clase tabageos.GeometricMath tiene algunas funciones avanzadas para curvas, caminos y matrices de fusión. Para lograr lo que desea, puede unir varios caminos. Por ejemplo: https://codepen.io/Contrapenner/pen/mdBVrbw
function dot(x, y) { var d = document.createElement("span"); d.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;width:2px;height:2px;background: blue"); document.getElementById("river").appendChild(d); }; var riverPath = tabageos.GeometricMath.getRawArcCurvePath(5, 5, 10, 10, 5, 15, 10); riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 15, 0, 20, 5, 25, 10)); riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 25, 10, 30, 5, 35, 10)); riverPath = tabageos.GeometricMath.mergeArrays(riverPath, tabageos.GeometricMath.getRawArcCurvePath(5, 35, 0, 40, 5, 45, 10)); //and you could keep going as needed. //there is also getRawHermiteCurvePath var i = 0; for (i; i < riverPath.length; i += 2) { dot(riverPath[i], riverPath[i + 1]); }