Actualmente me encuentro viendo un curso en línea sobre HTML5 y he llegado a la parte en la que explican el funcionamiento y todas las propiedades de la API Canvas. Todo bien hasta que en cierto punto comenzamos a hacer trazos, me doy cuenta que no me salen como en el video aun cuando tengo el código idéntico, o bueno, casi idéntico.
Hemos comenzado haciendo un pequeño dibujo de un triángulo, al principio me frustraba porque no me aparecía como al profesor. El profesor en su código mientras construía la estructura del canvas en HTML escribía: <canvas width="500" height="300" id="lienzo">
y yo, en vez de especificar el ancho y alto del canvas dentro de la etiqueta <canvas>
lo que hacía era especificarlo como estilo CSS usando el id="lienzo"
que le había colocado, lo hacía así por qué creía que era lo más correcto.
Mientras iba realizando los ejercicios, me daba cuenta que mis coordenadas no coincidían con las del profesor y por lo tanto, los ejercicios no salían igual, he aquí la diferencia de la que me he dado cuenta luego:
Con el ancho y alto especificado en CSS
window.addEventListener("load",comenzar,false);
function comenzar(){
var elemento=document.getElementById("lienzo");
lienzo=elemento.getContext("2d");
lienzo.beginPath();
lienzo.moveTo(20,80);
lienzo.lineTo(80,80);
lienzo.lineTo(50,20);
lienzo.lineTo(20,80);
lienzo.clip();
lienzo.beginPath();
for(i=0;i<250;i+=10){
lienzo.moveTo(0,i);
lienzo.lineTo(500,i);
}
lienzo.closePath();
lienzo.stroke();
}
#lienzo{
width: 500px;
height: 300px;
border: 1px red solid;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="dibujo">
<canvas id="lienzo">
Tu navegador no soporta Canvas
</canvas>
</section>
</body>
</html>
Con el ancho y alto especificado en la etiqueta <canvas>
de HTML
window.addEventListener("load",comenzar,false);
function comenzar(){
var elemento=document.getElementById("lienzo");
lienzo=elemento.getContext("2d");
lienzo.beginPath();
lienzo.moveTo(20,80);
lienzo.lineTo(80,80);
lienzo.lineTo(50,20);
lienzo.lineTo(20,80);
lienzo.clip();
lienzo.beginPath();
for(i=0;i<250;i+=10){
lienzo.moveTo(0,i);
lienzo.lineTo(500,i);
}
lienzo.closePath();
lienzo.stroke();
}
#lienzo{
/*width: 500px;
height: 300px;*/
border: 1px red solid;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section id="dibujo">
<canvas id="lienzo" width="500" height="300">
Tu navegador no soporta Canvas
</canvas>
</section>
</body>
</html>
Me gustaría que alguien me pudiera aclarar esta curiosidad, ya que he buscado y a simple vista no veo la diferencia más que el cambio en el dibujo, antes pensaba que haciéndolo de ambas formas era lo mismo, pero ahora veo que no.
<>
), y si es un tutorial online, podrías enlazar al mismo para que otros usuarios puedan tenerlo como referencia a la hora de responder a tu pregunta.