Tutorial HTML5 – Canvas pintar y rellenar formas curvas, círculos y circunferencias

Hola:

En este capítulo vamos a hablar de la función arc() del canvas de html 5. En principio solo pasándole los parametros dibujaría nuestros círculos los cuales pueden ser parametizados para formar arcos, curvas o circunferencias de colores.

arc(x,y,radio,iniAngulo,finAngulo, sentidoHorario);

X,y y radio son fáciles de entender, los primeros sitúan el centro del círculo en el canvas y el segundo el radio para dibujar.

iniAngulo son los grados dónde se inicia a pintar el círculo

finAngulo Fin de grados dónde termina el circulo

sentidoHorario a true el circulo se dibuja en sentido de las agujas del reloj en false en antehorario .

<head>

<title>Tutorial html5 Canvas - Líneas curvas,círculos y circunferencias</title>

</head>

<body onload=’PintarCurvasHtml5();’ link=»red» vlink=»red» alink=»red»>

<div align=»center»>

<table   class=»table0″ >

<tr>

<td>

 

</td>

<td bgcolor=»#f1f1f1″>

<canvas id=»canvas» width=»400″ height=»300″>

<p>Desde forohtml5.com le sentimos comunicar que su Navegador

no soporta el elemento canvas de html5</p>

<p>Use alguno de estos navegadores:

<a href=»http://www.google.com/chrome/eula.html?hl=es»>Chrome</a>,

<a href=»http://www.opera.com»>Opera</a>,

<a href=»http://www.mozilla.com»>Firefox</a>,

<a href=»http://www.apple.com/safari»>Safari</a>,

and <a href=»http://www.konqueror.org»>Konqueror</a>.</p>

</canvas>

</td>

<td>

</tr>

</table>

</div>

<script type=»text/javascript»>

function PintarCurvasHtml5(){

var canvas = document.getElementById(‘canvas’);

var canvaHtml5 = canvas.getContext(‘2d’); // dibujos en 2d

canvaHtml5.beginPath();

var x          = 100;               // Coordinada x

var y          = 100;               // Coordinada y

var radio     = 30;                    // Radio del arco

var iniAngulo = 15;                     // Punto de inicio del círculo

var limitCirculo = 5;   // esto sirve para hacer círculos incompletos

var finAngulo   = Math.PI+(Math.PI*limitCirculo/2); // Punto final del círculo

var sentidoHorario  =  true; // Construcción en sentido horario o antihorario

// false  para contrario

canvaHtml5.arc(x,y,radio,iniAngulo,finAngulo, sentidoHorario);

canvaHtml5.fill(); // para rellenar y pintar circunferencias

//  canvaHtml5.stroke(); // así pintamos círculo sin rellenar **comentamos fill;

}

 

</script>

¿Dudas? escríbenos.

Leave a comment

Sign in to post your comment or sine up if you dont have any account.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Tu software de gestión


Últimas preguntas:

Logo Dkreativo
Vertutoriales