Logo de Android con Canvas en HTML5, CSS3 y JS

Logo de Android con Canvas en HTML5, CSS3 y JS: 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;
}