Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 152

Visitas el mes pasado: 222

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (VI)

Dibujar arcos

imagen canvas

El método arc()

Un arco es una porción de una circunferencia. Para dibujar un arco canvas tiene su propio método, el cual tiene en cuenta la circunferencia a la que pertenece. el método arc() permite dibujar tanto un arco como una circunferencia completa. Su sintaxis es la siguiente:

cxt.arc(<x>,<y>,<radio>,<ini_arco>,<fin_arco>,<giro>);

El método arc emplea 5 parámetros los cuales vamos a explicar a continuación:

La medida de los ángulos en radianes es la forma habitual en javascript de medir los ángulos. si tenemos el ángulo en grados es muy fácil pasarlo a radianes. Recuerda que un radian es un arco de la misma longitud que el radio, por lo que la circunferencia tendra 2PI radianes, por tanto 180º=PI*1rad. Por tanto un número n de grados sera en radianes : rad=nº*PI/180, es decir lo multiplicamos por PI y lo dividimos por 180. Esto en javascript se traduce en el siguiente código:

rad=grados*Math.PI/180;

La circunferencia no es más que un arco de 360º o 2PI radianes, por lo que dibujar una circunferencia completa es lo mismo que dibujar un arco con este ángulo.


Ejemplo de dibujo de arcos.

veamos ahora algún ejemplo de dibujo de arcos y circunferencias con canvas. Como siempre empezamos por el código HTML del canvas:

<canvas id="ejemplo1" width="220" height="220">
</canvas>

Para poner a continuación el código javascript. Recuerda que como en páginas anteriores debemos haber puesto en el código la función iniciaCanvas explicada en la página 2 de este manual, y además debemos escribir el código dentro de la función window.onload=function().

cxt=iniciaCanvas("ejemplo1");
if (cxt) {
cxt.beginPath(); //iniciar ruta
cxt.strokeStyle="blue"; //color de línea
cxt.lineWidth=3; //grosor de línea
cxt.arc(55,55,45,0,2*Math.PI); //círculo completo.
cxt.stroke();
cxt.beginPath(); //nueva ruta
cxt.arc(155,55,45,0,0.5*Math.PI,true); //arco de 3/4 de circunferencia
cxt.stroke();
cxt.beginPath(); //nueva ruta
cxt.arc(55,155,45,-30*Math.PI/180,-150*Math.PI/180,true); //otro arco
cxt.stroke();
cxt.beginPath(); //nueva ruta
cxt.arc(155,155,45,120*Math.PI/180,270*Math.PI/180); //otro arco
cxt.stroke();
}

Como siempre aquí a la derecha vemos el resultado en el navegador del canvas anterior.

Vemos cómo los valores de los ángulos en los parámetros los hemos convertido en la mayoría de los casos de grados a radianes mediante la fórmula nº*Math.PI/180, incluso pòdemos poner ángulos negativos, los cuales se miden en el sentido antihorario.

Observa como tódos los ángulos se empiezan a medir en el extremo derecho del círculo, y en sentido horario, aunque luego esté marcado en ultimo parámetro que el arco se ejecute en sentido antihorario (valor "true").

Al pasar de un círculo a otro debemos iniciar una nueva ruta, de lo contrario, se crearia una línea que une el final de un círculo con el principio de otro.


Dibujar figuras con arcos

Podemos también hacer figuras rellenas como círculos, semicírculos, sectores circulares, o arcos con color. Para ello no tenemos más que usar los métodos para hacer líneas rectas moveTo() y lineTo() y si es preciso, porque queremos poner contorno el método closePath(). Todos ellos vistos en páginas anteriores.

Como ejemplo hacemos un nuevo canvas en el que tomamos los arcos del anterior y lo ampliamos para que podamos ver algunas figuras.

Empezamos por el código HTML:

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

Después ponemos el código javascript de Canvas, como siempre dentro de la función window.onload = function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.strokeStyle="blue"; //color de línea
cxt2.fillStyle="red"
cxt2.lineWidth=3; //grosor de línea
cxt2.arc(55,55,45,0,2*Math.PI); //círculo completo.
cxt2.stroke();
cxt2.fill()
cxt2.beginPath(); //nueva ruta
cxt2.moveTo(155,55);
cxt2.arc(155,55,45,0,0.5*Math.PI,true); //arco de 3/4 de circunferencia
cxt2.closePath();
cxt2.stroke();
cxt2.fill();
cxt2.beginPath(); //nueva ruta
cxt2.arc(55,155,45,-30*Math.PI/180,-150*Math.PI/180,true); //otro arco
cxt2.closePath();
cxt2.stroke();
cxt2.fill();
cxt2.beginPath(); //nueva ruta
cxt2.moveTo(155,155);
cxt2.arc(155,155,45,120*Math.PI/180,270*Math.PI/180); //otro arco
cxt2.closePath();
cxt2.stroke();
cxt2.fill();
}

El resultado del código anterior lo vemos aquí a la derecha.

Observa lo que hemos hecho para crear sectores circulares y arcos rellenos. Para crear un sector circular movemos el puntero al centro de la circunferencia mediante moveTo(), después dibujamos el arco con el método arc(), y cerramos la figura con closePath(). Para crear un arco relleno dibujamos el arco con el método arc(), y después cerramos la figura con closePath().






En la siguiente página veremos como se construyen otro tipo de curvas:

Curvas de Bezier.



Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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