Bienvenidos a mi post!
Últimamente he estado estudiando un poco el mundo de Canvas de HTML5 y para practicar decidí hacer el escudo de Boca, creo que me quedó bastante aceptable así que les comparto el código para que lo prueben si quieren y modifiquen a gusto,
No es un código muy complejo y viene bien para entender un poco más de HTML5 y canvas por si alguno esta empezando con esto.
Lamentablemente Taringa! no tiene una manera de agregar código fuente de manera "elegante", lo máximo que pude hacer fue agregar el código como lo verán mas abajo, les recomiendo que lo copien y lo peguen en algún editor de texto o IDE como la gente, por ejemplo Sublime Text, Webstorm, Netbeans, Dreamweaver, notepad++, cualquiera que por lo menos les coloree el código.
IMPORTANTE!!!!
Al final del código esta el cierre de la etiqueta script, deberia ser " /script" pero lo coloque separado asi: "/ script", lo tuve que hacer por que Taringa por alguna razón no me guarda el documento si lo escribo junto, calculo que es por una cuestión de seguridad para ni injectar js o lo que sea, la cuestion es que tiene que unirlo sino NO LES VA A FUNCIONAR.
Aca les paso el código, ejecutenlo en Chrome o safari y les debería mostrar algo como lo siguiente:
Abajo del código explico mas o menos como funciona
Crear un archivo .html y copiar todo lo siguiente:
El código esta dividido en varias funciones, la primera a la que llama es iniciar(), y ésta llama a varias funciones que básicamente hacen lo que dice su nombre, por ejemplo dibujarEstrellas() dibuja todas las estrellas del escudo, dibujarB() dibuja la letra B, y asi.
Les recomiendo para entender un poco el código es que vayan modificando un poco las variables, e ir función por función.
Si les gustó y no entienden algo del código escríbanlo en los comentarios voy a tratar de sacar todas las dudas.
Últimamente he estado estudiando un poco el mundo de Canvas de HTML5 y para practicar decidí hacer el escudo de Boca, creo que me quedó bastante aceptable así que les comparto el código para que lo prueben si quieren y modifiquen a gusto,
No es un código muy complejo y viene bien para entender un poco más de HTML5 y canvas por si alguno esta empezando con esto.
Lamentablemente Taringa! no tiene una manera de agregar código fuente de manera "elegante", lo máximo que pude hacer fue agregar el código como lo verán mas abajo, les recomiendo que lo copien y lo peguen en algún editor de texto o IDE como la gente, por ejemplo Sublime Text, Webstorm, Netbeans, Dreamweaver, notepad++, cualquiera que por lo menos les coloree el código.
IMPORTANTE!!!!
Al final del código esta el cierre de la etiqueta script, deberia ser " /script" pero lo coloque separado asi: "/ script", lo tuve que hacer por que Taringa por alguna razón no me guarda el documento si lo escribo junto, calculo que es por una cuestión de seguridad para ni injectar js o lo que sea, la cuestion es que tiene que unirlo sino NO LES VA A FUNCIONAR.
Aca les paso el código, ejecutenlo en Chrome o safari y les debería mostrar algo como lo siguiente:
Abajo del código explico mas o menos como funciona
Crear un archivo .html y copiar todo lo siguiente:
<!DOCTYPE>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="410px" height="430px" style=background-color:#034EA2></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//Esta función la copie de http://jsfiddle.net/m1erickson/8j6kdf4o/
function drawStar(cx, cy, spikes, outerRadius, innerRadius) {
var rot = Math.PI / 2 * 3;
var x = cx;
var y = cy;
var step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius)
for (i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y);
rot += step;
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y);
rot += step;
}
ctx.lineTo(cx, cy - outerRadius);
ctx.closePath();
ctx.lineWidth=5;
ctx.strokeStyle = '#FFDD00';
ctx.stroke();
ctx.fillStyle='#FFDD00';
ctx.fill();
}
var posiciones = [
// 1ra fila
{x:130,y:55},{x:280,y:55},
// 2da fila
{x:100,y:78},{x:140,y:78},{x:180,y:78},{x:230,y:78},{x:270,y:78},{x:310,y:78},
// 3ra fila
{x:75,y:106},{x:110,y:106},{x:145,y:106},{x:182,y:106},{x:228,y:106},{x:265,y:106},{x:300,y:106},{x:335,y:106},
// 4ta fila
{x:75,y:134},{x:110,y:134},{x:145,y:134},{x:182,y:134},{x:228,y:134},{x:265,y:134},{x:300,y:134},{x:335,y:134},
// 5ta fila
{x:95,y:235},{x:131,y:235},{x:167,y:235},{x:205,y:235},{x:243,y:235},{x:279,y:235},{x:315,y:235},
// 6ta fila
{x:107,y:263},{x:146,y:263},{x:185,y:263},{x:225,y:263},{x:264,y:263},{x:303,y:263},
// 7ta fila
{x:127,y:291},{x:166,y:291},{x:205,y:288},{x:245,y:291},{x:284,y:291},
// 8ta fila
{x:150,y:319},{x:185,y:315},{x:225,y:315},{x:261,y:319},
// 9ta fila
{x:175,y:345},{x:205,y:340},{x:235,y:345},
// 10ta fila
{x:205,y:365}
];
function dibujarBordes(){
ctx.lineWidth="15";
ctx.strokeStyle = '#FFDD00';
ctx.fillStyle = '#034EA2';
ctx.beginPath();
ctx.moveTo(50,80);
ctx.lineTo(130,20);
ctx.bezierCurveTo(150,60,260,60,280,20);
ctx.lineTo(360,80);
ctx.bezierCurveTo(350,200,350,290,205,400);
ctx.bezierCurveTo(60,290,50,200,50,80);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
function dibujarEstrellas(){
for (var i = 0; i < posiciones.length; i++) {
drawStar(posiciones[i].x,posiciones[i].y,5,5,2.5);
};
}
function iniciar(){
dibujarBordes();
dibujarEstrellas();
dibujarC();
dibujarA();
dibujarB();
dibujarJ();
}
function dibujarC(){
ctx.strokeStyle = '#FFDD00';
ctx.lineWidth="18";
ctx.beginPath();
ctx.moveTo(125,175);
ctx.lineTo(125,165);
ctx.lineTo(115,158);
ctx.lineTo(100,158);
ctx.lineTo(90,165);
ctx.lineTo(90,200);
ctx.lineTo(100,207);
ctx.lineTo(115,207);
ctx.lineTo(125,200);
ctx.lineTo(125,190);
ctx.stroke();
}
function dibujarA(){
ctx.strokeStyle = '#FFDD00';
ctx.lineWidth="17";
ctx.beginPath();
ctx.moveTo(158,158);
ctx.lineTo(195,158);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(140,207);
ctx.lineTo(170,207);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(182,207);
ctx.lineTo(212,207);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(150,207);
ctx.lineTo(176,158);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(176,158);
ctx.lineTo(202,207);
ctx.stroke();
ctx.lineWidth="13";
ctx.beginPath();
ctx.moveTo(163,188);
ctx.lineTo(189,188);
ctx.stroke();
}
function dibujarB(){
ctx.strokeStyle = '#FFDD00';
ctx.lineWidth="18";
ctx.beginPath();
ctx.moveTo(220,158);
ctx.lineTo(255,158);
ctx.lineTo(262,165);
ctx.lineTo(262,175);
ctx.lineTo(255,182);
ctx.lineTo(225,182);
ctx.lineTo(255,182);
ctx.lineTo(262,189);
ctx.lineTo(262,199);
ctx.lineTo(255,206);
ctx.lineTo(220,206);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(233,206);
ctx.lineTo(233,158);
ctx.stroke();
}
function dibujarJ(){
ctx.strokeStyle = '#FFDD00';
ctx.lineWidth="18";
ctx.beginPath();
ctx.moveTo(285,187);
ctx.lineTo(285,200);
ctx.lineTo(292,206);
ctx.lineTo(305,206);
ctx.lineTo(312,200);
ctx.lineTo(312,158);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(295,158);
ctx.lineTo(325,158);
ctx.stroke();
}
iniciar();
</ script><!-- El espacio entre / y script no va -->
</body>
</html>
El código esta dividido en varias funciones, la primera a la que llama es iniciar(), y ésta llama a varias funciones que básicamente hacen lo que dice su nombre, por ejemplo dibujarEstrellas() dibuja todas las estrellas del escudo, dibujarB() dibuja la letra B, y asi.
Les recomiendo para entender un poco el código es que vayan modificando un poco las variables, e ir función por función.
Si les gustó y no entienden algo del código escríbanlo en los comentarios voy a tratar de sacar todas las dudas.