Ayer mientras no podía dormir, me puse a ver algunas de las novedades de HTML 5 y me llamó la atención el objeto canvas, lienzo en el que podemos dibujar libremente por medio de matemáticas y proporciones. Lo que traté de hacer fue dibujar una estrella, medio al ojo medio matemáticas, con el objetivo cumplido dibujé la bandera de Chile:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="canvasEstrella.js"></script>
<script type="text/javascript">
window.onload = function(){
var elemento = document.getElementById('canvas_chile');
if (elemento && elemento.getContext) {
var ctx = elemento.getContext('2d');
if (ctx) {
// Bordes de la bandera, un rectángulo blanco.
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, 600, 400);
// Franja inferior, roja
ctx.fillStyle = '#DC241F';
ctx.fillRect(0, 200, 600, 200);
// Cuadrado superior, azul:
ctx.fillStyle = '#0035AD';
ctx.fillRect(0, 0, 200, 200);
//Dibujar la estrella, blanca:
ctx.fillStyle = "#FFFFFF";
// Coordenadas del centro de la estrella:
var centroX=100;
// Radio de la circunferencia de circunscribe a la estrella:
var radio=50;
canvasEstrella(ctx, centroX, radio);
ctx.fill();
}
}
}
</script>
</head>
<body>
<canvas id="canvas_chile" width="600" height="400"
style="margin: 60px 40px;-webkit-border-radius: 10px; -webkit-box-shadow: 10px 10px 5px #999;">
Si ves este mensaje, tu navegador no soporta el objeto canvas
</canvas>
</body>
</html>
La implementación de la función canvasEstrella(…):
/**
* Crea una estrella, en objeto canvas, circunscrito en una circunferencia a definir.
*
* ctx: Context "2d" en el que se dibujará la estrella.
* centroX: coordenada en X del centro de la circunferencia que circunscribe a la estrella.
* radio: radio de la circunferencia que circunscribe a la estrella.
*/
function canvasEstrella(ctx, centroX, radio){
var PP = 80/radio; //Proporcion
//Traslación: se toma como referencia el centro
//y la coordenda del primer vertice (100/p).
var dif = (centroX-(100/PP));
// Dibujo de la estrella... al ojo.
ctx.beginPath();
ctx.moveTo((100/PP)+dif,(20/PP)+dif);//1
ctx.lineTo((118/PP)+dif,(73/PP)+dif);//2
ctx.lineTo((175/PP)+dif,73/PP+dif);//3
ctx.lineTo((132/PP)+dif,110/PP+dif);//4
ctx.lineTo((149/PP)+dif,164/PP+dif);//5
ctx.lineTo((100/PP)+dif,132/PP+dif);//6
ctx.lineTo((52/PP)+dif,164/PP+dif);//7
ctx.lineTo((69/PP)+dif,110/PP+dif);//8
ctx.lineTo((25/PP)+dif,73/PP+dif);//9
ctx.lineTo((81/PP)+dif,73/PP+dif);//10
ctx.closePath();
}
El resultado se ve así
Enlaces:
How To Draw A Star | Wikipedia: Bandera Chilena | Manual de Canvas del HTML5