Salta al contingut principal

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;
}



Enviar comentario



Comentaris

Publica un comentari a l'entrada

Entrades populars d'aquest blog

15 Tutoriales CSS3 para mejorar tus paginas web

15 Tutoriales CSS3 para mejorar tus paginas web : Les dejo una pequeña recopilación de tutoriales CSS3 que espero sean de utilidad para ustedes, intentamos hacer una recopilación bastante completa para crear impresionantes diseños web con CSS3 y aprovechar las bondades de CSS3 incluso para aplicar efectos, son un total de 15 tutoriales CSS3 gratis . Crear menu dropdown con CSS3 Crear breadcrumbs con estilo Transiciones de paginas con CSS3 Crear timeline con CSS3 y jQuery Reproductor de video con HTML5, CSS3 y jQuery Crear efecto acordion CSS3 Aplicar degradado a texto Crear texto en curva con CSS3 y jQuery Aplicar textura a texto con Magic Pill Crear slider de imagenes con CSS3 y jQuery Rotar texto con CSS3 Crear menu vertical con CSS3 Crear formulario con HTML5 y CSS3 Crear efecto de imagenes apiladas con CSS3 Aplicar estilos para imagenes con CSS3  
Publica un comentari a l'entrada
Més informació

El meu editor de codi preferit el 2024, que això ja se sap que va canviant 😄

Visual Code Visual Code és un editor de codi font lleuger, però potent que s’executa al teu escriptori i està disponible per a Windows, macOS i Linux. Compta amb suport integrat per a JavaScript, TypeScript i Node.js i té un ric ecosistema d’extensions per a altres llenguatges i entorns d’execució (com C++, C#, Java, Python, PHP, Go, .NET).  És una eina ideal per a desenvolupar i depurar aplicacions web i en el núvol. Per què Visual Code? Visual Code té molts avantatges com a editor de codi font, com per exemple: És gratuït, ràpid i fàcil d’instal·lar i actualitzar. Té un ampli ecosistema d’extensions que et permeten afegir funcionalitats i personalitzar la teva experiència de desenvolupament. Té un suport integrat per a molts llenguatges i entorns d’execució, i et permet depurar i executar el teu codi des del mateix editor. Té una interfície senzilla i elegant, amb diferents temes i modes de visualització. Té un sistema de sincronització de configuracions que et permet guardar les...
Publica un comentari a l'entrada
Més informació

Learn Composition from the Photography of Henri Cartier-Bresson

“Do you see it?” This question is a photographic mantra. Myron Barnstone , my mentor, repeats this question every day with the hopes that we do “see it.” This obvious question reminds me that even though I have seen Cartier-Bresson’s prints and read his books, there are major parts of his work which remain hidden from public view. Beneath the surface of perfectly timed snap shots is a design sensibility that is rarely challenged by contemporary photographers. Henri Cartier-Bresson. © Martine Franck Words To Know 1:1.5 Ratio: The 35mm negative measures 36mm x 24mm. Mathematically it can be reduced to a 3:2 ratio. Reduced even further it will be referred to as the 1:1.5 Ratio or the 1.5 Rectangle. Eyes: The frame of an image is created by two vertical lines and two horizontal lines. The intersection of these lines is called an eye. The four corners of a negative can be called the “eyes.” This is extremely important because the diagonals connecting these lines will form the breakdown ...
Publica un comentari a l'entrada
Més informació