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>
