Emely Gabriela Mendieta Cabrera
PreguntaEl dibujo no me sale, supuestamente es un cuadrado, el canvas tienes 18px width/height
var canvas=document.getElementById(“area_de_dibujo”);
var papel = canvas.getContext(“2D”);
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){
papel.beginPath();
papel.strokeStyle = color;
papel.moveTo(xinicial, yinicial);
papel.lineTo(xfinal, yfinal);
papel.stroke();
papel.closePath();
}
dibujarLinea(“red”, 4, 3, 8, 3);
dibujarLinea(“red”, 4, 3, 4, 6);
dibujarLinea(“red”, 4, 6, 8, 6);
dibujarLinea(“red”, 8, 3, 8, 6);
- No has recargado la página.
- Las comillas dobles están diferentes; es decir, aquí se comparten como y
“, pero deberían ser”." - El nombre del archivo JavaScript es diferente a .
eventos.js
Emely Gabriela Mendieta Cabrera
El nombre del archivo JS, creo... es que también transcribí de nuevo algunas cosas por si acaso
Kevin J. Zea Alvarado
¡Excelente! 🙌 Me alegro, Emely. ¿Qué era lo que no estaba funcionando?
Emely Gabriela Mendieta Cabrera
Si ya me salio. MUCHAS GRACIAS Kevin!! :)
Kevin J. Zea Alvarado
Mira, así me muestra el resultado:
Hay posibles razones por las que no te esté funcionando:
Intenta con eso. Y avísame cuál es el resultado en tu navegador y en la consola.
Emely Gabriela Mendieta Cabrera
ESTE ES EL HTML
<!DOCTYPE html> <html></html><head> <meta charset = "utf-8"> <title>Dibujando con Canvas</title> </head> <body> <p>El Canvas comienza aquí</p> <canvas width="300" height="300" id="area_de_dibujo"></canvas> <p> HASTA AQUÍ ES EL CANVAS</p> <script src="eventos.js"></script> </body>
Y ESTE EL JS var canvas = document.getElementById("area_de_dibujo"); var papel = canvas.getContext("2d");
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){ papel.beginPath(); papel.strokeStyle = color; papel.moveTo(xinicial, yinicial); papel.lineTo(xfinal, yfinal); papel.stroke(); papel.closePath(); }
dibujarLinea("red", 4, 3, 8, 3); dibujarLinea("red", 4, 3, 4, 6); dibujarLinea("red", 4, 6, 8, 6); dibujarLinea("red", 8, 3, 8, 6);
Kevin J. Zea Alvarado
Hmm... Está interesante. 🤔 Comparte tu HTML y tu JavaScript, por favor.
Emely Gabriela Mendieta Cabrera
Cambie el tamaño del canvas a 300px, para ver más la diferencia (hay aun no tenia el height arreglado), cuando arregle el height vi que se coloco más alto, pero nada del cuadrado, tendré las coordenadas mal? o el JS?
Kevin J. Zea Alvarado
Oh, y cambia el typo del atributo del
<canvas>heigthheightEmely Gabriela Mendieta Cabrera
Cambie el width y nada... uff que cansancio con la programación, pero vale la pena.
Kevin J. Zea Alvarado
Tal vez se debe al typo que tiene el atributo del
<canvas>withwidth
