Crea tus propios dibujos y animaciones con Canvas en HTML5
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 62
Visitas el mes pasado: 114
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquà mismo se enseñan.
By Anyelguti
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.
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:
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.
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:
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
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