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>
