Estoy aprendiendo los conceptos básicos de javascript en la escuela, ahora estoy trabajando en el lienzo.
este es mi codigo
canvas = document.getElementById("myCanvas") ctx = canvas.getContext("2d") offset = canvas.width / 2 function assi() { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.beginPath() ctx.moveTo(offset, 0) ctx.lineTo(offset, offset * 2) ctx.moveTo(0, offset) ctx.lineTo(offset * 2, offset) ctx.stroke() } function f(x) { return Math.pow(2, x) * -1; } function draw() { assi() ctx.beginPath() ctx.strokeStyle = "red" moveTo(offset, f(0) + offset) for (let x = -offset; x < offset; x++) { ctx.lineTo(x + offset, f(x) + offset) } ctx.stroke() } <body onload="draw()"> <canvas height="800" width="800" id="myCanvas"></canvas> <script src="script.js"></script> </body> esta es mi pregunta
¿Por qué en la función f(x) si dejo *-1 no dibuja nada, mientras que si borro *-1 dibuja algo?
Dibuja funciones lineales, pero la función exponencial da problema, y no es Math.pow() el problema, porque si uso 1 como base funciona (en realidad dibuja una línea, pero es correcto)
El *-1 es necesario para reflejar el eje y del sistema de ejes del lienzo (de arriba hacia abajo) en el sistema de ejes cartesianos (de abajo hacia arriba)
Parece que dibujar líneas a números negativos muy altos causa problemas...
Si desea que el código muestre algo útil, podemos agregar una declaración if para aquellos con valores Y positivos, también podríamos restringirnos a un negativo no tan grande, pero eso se lo dejo a usted.
Estoy dibujando arcos para mostrar los puntos y también dividir la salida de la función para reducir la cantidad, mostrando diferentes curvas.
const canvas = document.getElementById("myCanvas") const ctx = canvas.getContext("2d") const offset = canvas.width / 2 function f(x) { return Math.pow(2, x) * -1; } let colors = ["black","cyan", "red", "blue", "green", "pink"] for (let i = 1; i <= colors.length; i++) { ctx.beginPath() ctx.strokeStyle = colors[i-1] for (let x = -offset; x < offset; x++) { let y = f(x/i) + offset + i*10 if (y > 0) { ctx.arc(x + offset, y, 1, 0, 6) } } ctx.stroke() } <canvas height="200" width="200" id="myCanvas"></canvas>Aquí está su código completo:
canvas = document.getElementById("myCanvas") ctx = canvas.getContext("2d") offset = canvas.width / 2 function assi() { ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.beginPath() ctx.moveTo(offset, 0) ctx.lineTo(offset, offset * 2) ctx.moveTo(0, offset) ctx.lineTo(offset * 2, offset) ctx.stroke() } function f(x) { return Math.pow(2, x) * -1; } function draw() { assi() ctx.beginPath() ctx.strokeStyle = "red" moveTo(offset, f(0) + offset) for (let x = -offset; x < offset; x++) { let y = f(x) + offset if (y > -1000) { ctx.lineTo(x + offset, y) } } ctx.stroke() } <body onload="draw()"> <canvas height="200" width="200" id="myCanvas"></canvas> </body>