En este ejemplo dibujaremos el logo de Android utilizando canvas en HTML5, CSS3 y algunas funciones en Javascript. Veremos las capacidades de dibujo fundamental del lienzo en HTML5: dibujo de líneas y curvas, dibujo de camino y dibujo de formas.
Código HTML5
Código :
<!--/*Code by Kres - @kresCruz(twiter) */-->
<html>
<head>
<title>Canvas caminos circulares</title>
<link rel="stylesheet" type="text/css" href="android_css.css"/>
<script>
//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recibimos el elemento canvas
var android = cargaContextoCanvas('android');
if(android){
android.fillStyle="#a5ca39";
android.beginPath();
android.arc(150,145,90,0, Math.PI*1, true);
android.closePath()
android.fill();
//Antenas
//ojos
android.fillStyle="#FFFFFF";
android.beginPath();
android.arc(100,110,9,0, Math.PI*2, true);
android.closePath()
android.fill();
android.fillStyle="#FFFFFF";
android.beginPath();
android.arc(200,110,9,0, Math.PI*2, true);
android.closePath()
android.fill();
//Antenas
android.beginPath();
android.lineCap = "round";
android.moveTo(130,120);
android.lineTo(80, 50);
android.strokeStyle = "#a5ca39";
android.lineWidth = 8;
android.stroke();
android.beginPath();
android.lineCap = "round";
android.moveTo(180,80);
android.lineTo(210, 50);
android.strokeStyle = "#a5ca39";
android.lineWidth = 8;
android.stroke();
}
}
</script>
</head>
<body>
<div id="contenedor">
<canvas id="android">
</canvas>
<div id="div_cuerpo">
<div class="mano" id="mano1">
</div>
<div id="cuerpo">
</div>
<div class="mano" id="mano2">
</div>
</div>
<div class="clear"></div>
<div id="div_pie">
<div id="pies">
<div class="pies" id="pie1">
</div>
<div class="pies" id="pie2">
</div>
</div>
</div>
<div class="clear"></div>
<div id="patineta">
<div id="base">
</div>
<div class="rueda" id="rueda1">
</div>
<div class="rueda" id="rueda2">
</div>
</div>
<div class="clear"></div>
<div id="autor">
anDroid - Css3 - Canvas Html5
</div>
</div>
</body>
</html>
Ahora el CSS3
Código :
/*Code by Kres - @kresCruz(twiter) */
body{
background-color:#2f2f2e;
}
#android{
width:400px;
}
#div_cuerpo{
display: block;
width:400px;
background-color:#bec1b6;
}
#cuerpo
{
float:left;
width:240px;
height:200px;
background-color:#99c224;
margin: 0 auto;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-bottom-right-radius: 20px;
-moz-border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
margin-left:5px;
}
.mano{
float:left;
width:50px;
height:150px;
background-color:#99c224;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
#mano1{
margin-left:25px;
}
#mano2{
margin-left:5px;
}
#div_pie{
display: block;
width:400px;
}
#pies{
width:240px;
margin: 0 auto;
}
.pies{
float:left;
width:50px;
height:80px;
background-color:#99c224;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-bottom-right-radius: 20px;
-moz-border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#pie1
{
margin-left:40px;
}
#pie2
{
margin-left:70px;
}
#patineta{
display: block;
width:400px;
padding:5px 0 0 0;
}
#base{
background-color:#FFFFFF;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
height:15px;
}
.rueda
{
float:left;
height:26px;
width:26px;
background-color:#FFFFFF;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}
#rueda1{
margin-left:20px;
}
#rueda2{
margin-left:320px;
}
#autor{
float:left;
color: #FFFFFF;
font-size: 20px;
font-family: Arial;
}
.clear {
clear:left;
}
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por rubencho176 el 16 de Enero de 2012
Por kres el 16 de Enero de 2012
carlosssasd :
si ves diferencias en el código postealo como tuto, y con alguna explicación de alguna propiedad importante para lograr el logo, o como encarar un dibujo de esas magnitudes en css3.
siempre es bueno el feedback!!!!
igualmente yo los veo casi iguales, solo con algunas diferencias en la presentación.
saludos!
rubencho176-blog :
como dice kres, el espacio para el laboratorio y experimentos siempre es bueno
Por Jaizu el 29 de Mayo de 2012
Por Annie el 26 de Agosto de 2013
Por Norge Matos el 09 de Septiembre de 2013
Es una lástima que no comentaste el ejemplo.