• Inspiración
  • Tutoriales
  • Talleres
    • Bootcamp de Desafio Latam, conviértete en desarrollador web
  • Oportunidades de trabajo

En1Mes

  • Talleres presenciales de rails
  • Bootcamp de programación

Dibujando con curvas bezier en HTML5

Dibujando con html5 y curvas bezier

Es posible dibujar curvas Bezier directamente en la página web con instrucciones utilizando el canvas de HTML5 y el método beziercurveTo.

¿para que sirven las curvas de bezier?

Las curvas de bezier sirven para hacer curvas bonitas, de hecho son un método matemático para describir curvas y que ha sido implementado en los sistemas CAD, Photoshop y quien sabe cuanta herramientas más, y,, como pronto se viene el evento de RailsGirls 2.0 hice este post Temático.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
	ctx.fillStyle = "rgba(200,0,0,0.5)";

    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
	ctx.font = "bold 16px Arial";
    ctx.fillText("Rails Girls 2.0", 100, 100);

  } else {
    alert('Necesitas un navegador moderno para poder ocupar el canvas de Html5 .');
  }
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

¿y no sería lo mismo ocupar una imagen hecha en photoshop?

Claro, de hecho sería mucho más fácil, pero aquí viene el siguiente desafío, ya que el canvas de html5 se puede limpiar cada cierto tiempo como en este experimento, podrías ocupar las curvas de bezier para hacer una animación interesante.

Sep 25, 2014Gonzalo Sánchez
Share Button
  • El Autor
  • Últimos Posts

About Gonzalo Sánchez

Emprendedor lean, Ingeniero civil informático dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas y por sobre todo fundador de en1mes.
  • Boorstin Honest disagreement is often a good sign of progress. - mayo 5, 2021
  • ¿Por qué Twitter fue hecho en Ruby on Rails? - abril 15, 2016
  • Construyendo una landing page en Ruby on Rails desde cero. - febrero 11, 2016
  • Pair programming (de a dos es mejor) - febrero 11, 2016
  • Creando un wordpress en hostinger - abril 18, 2015
  • Login con facebook en rails 4.1 y 4.2 - febrero 3, 2015
  • EL ASSET PATH DE RAILS - enero 26, 2015
  • Entendiendo los objetos en Ruby - enero 21, 2015
  • La verdadera educación Tecnologica - enero 14, 2015
  • Kit Digital del gobierno de Chile - enero 14, 2015
8 years ago 1 Comment Diseño, Html5html5, RailsGirls2,489
Twitter Search API + Ruby on Rails (II parte)El juego de Bezier
You Might Also Like
 
HTML5 dejó a flash obsoleto
 
HTML5 es mucho más que un Doctype!
Comments: 0
Pingbacks: 1
  1. The Beziér Game | En1mes
    8 years ago

Deja un comentario Cancelar respuesta

Últimos Tweets

Authentication failed! Please check your Twitter app data.
Tags
Ruby on Railsemprendimientos digitalesTutorialesDiseñoHerramientashtml5WordpressrubyLanding PageBases de datosTallereshackathonInspiraciónTipsNitrousHerokuPáginas WebphpCSSsmartphonesRailsGirlsEventosemprendimientos socialeslenguajes de programaciónJavascriptHostingEducaciónGemasprogramaciónCreatividadMySQLemprendimientosCitas inspiradorasExperimentosBenchmarksdiseño responsivoFrameworksInspector de ElementosTwitterlean startupredes socialestecnologíaHackatonUsabilidadmetodologías
Interesado en otros tipos de emprendimiento?

Quieres aprender a importar y exportar productos a todo el mundo? entra aquí

No te pierdas ningún artículo.

2016 © En 1 Mes