Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Canvas (V)

Estilos de línea

Grosor de línea

En esta página veremos varias propiedades que se pueden aplicar para variar los estilos de línea y de relleno de los elementos de canvas. Empezaremos modificando el grosor de línea.

Se puede modificar el grosor de línea en Canvas con la propiedad:

cxt.lineWidth=n;

Donde el valor n es un número que indica el grosor de la línea en píxeles.

La propiedad afecta a todas las líneas que haya antes del método stroke(). Para cambiar de grosor la siguiente línea primero debemos llamar al método stroke() y despues a lineWidth();

Veamos un ejemplo: ponemos primero el código HTML del canvas:

<canvas id="ejemplo1" width="200" height="100">
</canvas>

Luego escribimos el código javascript. Recuerda que tanto para este ejemplo como para los siguientes debemos tener ya en el código javascript la función iniciaCanvas() vista en la segunda página de este manual.

window.onload=function() {
cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciamos una ruta
cxt.strokeStyle="blue"; //Color de línea
cxt.lineWidth=12; //primer grosor de línea 
cxt.moveTo(20,20); //primera línea: inicio
cxt.lineTo(180,40); //primera línea: final
cxt.stroke(); //visualizar primera línea
cxt.lineWidth=6; //grosor segunda línea
cxt.moveTo(20,50); //segunda línea: inicio
cxt.lineTo(180,70); //segunda línea: final
cxt.stroke(); //visualizar segunda línea
}
}

El resultado de este canvas lo puedes ver aquí a la derecha.

Haremos ahora un segundo ejemplo en el que pondremos varias líneas que disminuyen de grosor progresivamente. Para no alargar excesivamente el código podemos utilizar un bucle que repita las instrucciones en cada línea; el código HTML del canvas será:

<canvas id="ejemplo2" width="200" height="200">
</canvas>

Y el código javascript, que irá incluido dentro de window.onload=function() será el siguiente:

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciamos la ruta
cxt2.strokeStyle="fuchsia"; //color de línea
x1=10;y1=30; //coordenadas 1º línea, 1º punto.
x2=100;y2=10; //coordenadas 1º línea, 2º punto.
x3=190;y3=30; //coordenadas 1º línea, 3º punto.
for (i=12;i>0;i--) { //bucle: repetimos 12 veces
    cxt2.lineWidth=i; //grosor de línea=i
    cxt2.moveTo(x1,y1); //punto inicial de línea
    cxt2.lineTo(x2,y2); //punto intermedio de línea
    cxt2.lineTo(x3,y3); //punto final de línea
    cxt2.stroke(); //visualizar línea
    y1+=15;y2+=15;y3+=15; //siguiente línea 15px por debajo.
    }
}

El resultado del script anterior podemos verlo aquí a la derecha.

Al usar aquí un bucle, hemos evitado tener que escribir repetitivamente el código para cada una de las líneas. Como ves se pueden usar todos los recursos de javascript para aplicarlos a los métodos y propiedades del canvas. Esto abre toda una serie de posibilidades, tales como hacer que el usuario intervenga en el diseño mediante formularios, crear elementos animados, etc.

estilo de extremo de línea

Podemos también modificar los extremos de la línea. Para ello la línea debe ser lo bastante gruesa como para que se pueda ver la diferencia de estilo. Utilizaremos para ello la propiedad lineCap

cxt.lineCap=<valor>;

Los posibles valores que admite esta propiedad son:

• "butt" : Valor por defecto, deja la línea como está.
• "round" : Añade un semicirculo al principio y al final de la línea, dejando los extremos redondeados.
• "square" : Añade medio cuadrado al principio y al final de la línea.

Los valores debemos escribirlos entre comillas (a no ser que vayan recogidos en una variable), ya que son cadenas de texto. En las opciones "round" y "square" la Línea se alarga el mismo número de píxeles que tiene de grosor (la mitad de ellos por cada extremo).

La propiedad afecta a toda la ruta, por lo que si queremos cambiar de estilo de extremo debemos iniciar una nueva ruta.

Veamos un ejemplo en el que se muestran los tres tipos de extremo de línea. empezaremos por el código HTML del canvas:

<canvas id="ejemplo3" width="200" height="100">
</canvas>

Y a continuación damos el código de javascript, como siempre debe cargarse después de la página por lo que lo incluimos dentro de la función window.onload=function().

cxt3=iniciaCanvas("ejemplo3");
if (cxt3) {
cxt3.beginPath(); //iniciamos la ruta
cxt3.strokeStyle="#f0f"; //color de línea
cxt3.lineWidth=12; //grosor de línea
cxt3.lineCap="butt"; //extremo línea: normal
cxt3.moveTo(20,20); //trazamos la línea
cxt3.lineTo(180,20);
cxt3.stroke();
cxt3.beginPath(); //nueva ruta
cxt3.lineCap="round"; //extremo línea: redondo
cxt3.moveTo(20,50); //trazamos la línea
cxt3.lineTo(180,50);
cxt3.stroke();
cxt3.beginPath(); //nueva ruta
cxt3.lineCap="square"; //extremo linea: cuadrado
cxt3.moveTo(20,80);
cxt3.lineTo(180,80);
cxt3.stroke();
}

Vemos el resultado del código anterior en el canvas de la derecha. Los valores "round" y "square" alargan la linea el mismo número de píxeles que tiene de grosor.

Estilo de esquinas

Cuando hay dos líneas rectas seguidas, es decir que hacen esquina, no nos sirve la propiedad lineCap para cambiar su estilo. Ésta sólo se aplica al principio de la primera línea y al final de la última. Para variar la forma que tiene la esquina utilizaremos la propiedad lineJoin.

cxt.lineJoin=<valor>;

Los posibles valores que admite esta propiedad son:

• "miter" : Valor por defecto: la esquina entre dos líneas toma su forma normal.
• "round" : La esquina entre dos líneas toma una forma redondeada.
• "bevel" : La esquina entre dos líneas se corta de forma que hace chaflán.

Al igual que la propiedad anterior, ésta afecta a toda la ruta, de manera que si queremos cambiar de estilo, debemos crear una nueva ruta. Veamos un ejemplo con los valores de esta propiedad. En primer lugar creamos el código HTML del canvas:

<canvas id="ejemplo4" width="200" height="200">
</canvas>
</pre>

Después escribiremos el código javascript del canvas; como siempre lo incluimos dentro del window.onload=function().

cxt4=iniciaCanvas("ejemplo4");
if (cxt4) {
cxt4.beginPath(); //iniciar ruta
cxt4.strokeStyle="green"; //color de línea
cxt4.lineWidth=10;  //grosor de línea
cxt4.lineJoin="miter" //esquina de líneas: valor "mitter"
cxt4.moveTo(20,20); //dibujar ruta
cxt4.lineTo(160,20);
cxt4.lineTo(20,60);
cxt4.stroke(); //visualizar ruta
cxt4.beginPath(); //nueva ruta
cxt4.lineJoin="round" //esquina de líneas: valor "round"
cxt4.moveTo(20,80); //dibujar ruta
cxt4.lineTo(160,80);
cxt4.lineTo(20,120);
cxt4.stroke(); //visualizar ruta
cxt4.beginPath(); //nueva ruta
cxt4.lineJoin="bevel" //esquina de lineas: valor "bevel"
cxt4.moveTo(20,140); //dibujar ruta
cxt4.lineTo(160,140);
cxt4.lineTo(20,180);
cxt4.stroke(); //visualizar ruta
}

El resultado del canvas es el que se muestra aquí a la derecha.

Las esquinas entre líneas adquieren distintos estilos según el valor que se le aplique al método lineJoin.

Hasta ahora hemos hecho líneas rectas, pero con canvas también se pueden hacer líneas curvas, esto lo veremos en las siguientes páginas

Dibujar arcos

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com