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.

Te puede interesar:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *