Búsqueda personalizada

19 nov 2013

Pin It

Widgets

Sencilla Gráfica en 2D con canvas html

10:16

Escrito por: Unknown El día: 19 nov 2013  A las: 10:16  No hay comentarios
Aquí os pongo un ejemplo de gráfica en canvas 2D que he pillado por ahí, es de código libre, así que lo podeis usar a vuestro antojo:


<!DOCTYPE html>
<html lang="es">
 
  <head>
    <meta charset="utf-8"/>
    <title>Dibujo con Canvas</title>
  </head>

  <script type="text/javascript">
            function dibujar(){

                var ctx = document.getElementById ('nuestroCanvas');
                var contenido = ctx.getContext ('2d');
                var imagenGrafica = new Image();
                imagenGrafica.src = 'grafica.png';
                imagenGrafica.onload = function(){

                        //Cargo la imagen en la posición
                        contenido.drawImage(imagenGrafica,0,0);
                       
                        //Indicar el grosor de la línea
                        contenido.lineWidth = 4;
                        //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,156);
                        contenido.lineTo(77,66);
                        contenido.lineTo(135,100);
                        contenido.lineTo(194,200);
                        contenido.lineTo(255,185);
                        contenido.lineTo(316,195);
                        contenido.lineTo(376,155);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(333, 71%, 53%, 1)";
                        contenido.stroke();

                         //Indicar el grosor de la línea
                        contenido.lineWidth = 1;
                         //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,126);
                        contenido.lineTo(77,176);
                        contenido.lineTo(135,160);
                        contenido.lineTo(194,100);
                        contenido.lineTo(255,155);
                        contenido.lineTo(316,225);
                        contenido.lineTo(376,85);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(120, 100%, 50%, 1)";
                        contenido.stroke();



                }
            }


</script>
 
  <!--Este código ha sido realizado por @eneakao, puedes utilizarlo libremente-->
  <body onload="dibujar()">
    <canvas id="nuestroCanvas" width="451" height="274"></canvas>
  </body>

</html>

Aquí os podeis descargar el ejemplo.

Espero que os sirva.

Escrito por

Si tienes alguna otra duda, o quieres comentar algo sobre el tema, te animo a que dejes un comentario. También puedes visitar nuestro foro. ¡Un saludo!

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

 

© 2014 Aplicaciones ...---Chey---.... All rights resevered. Designed by Chey Developer

Back To Top
Recibe las actualizaciones directo a tu correo