¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Html5: Dibuja utilizando Canvas y Javascript
#1
0
Aca les dejo un codigo simple para dibujar un smile usando solo algunos pocos estilos, algo de javascirpt y un canvas.
Primero agregamos el agregamos en el tag "style"

Código:
H1 {

    font-family: Arial, Sans-serif;

    font-size: 24px;

    color: navy;

    font-weight: normal;

    position: absolute;

    left: 45px;

    top: 0;

}

Despues en el tag "script"

Código:
window.onload = function() {

    var drawingCanvas = document.getElementById('myDrawing');



    // Check the element is in the DOM and the browser supports canvas

    if(drawingCanvas && drawingCanvas.getContext) {

        // Initaliase a 2-dimensional drawing context

        var context = drawingCanvas.getContext('2d');



        // Create the yellow face

        context.strokeStyle = "#000000";

        context.fillStyle = "#FFFF00";

        context.beginPath();

        context.arc(100,100,50,0,Math.PI*2,true);

        context.closePath();

        context.stroke();

        context.fill();



        // Add 2 green eyes

        context.strokeStyle = "#000000";

        context.fillStyle = "#FFFFFF";

        context.beginPath();

        context.arc(80,80,8,0,Math.PI*2,true);

        context.closePath();

        context.stroke();

        context.fill();



        context.fillStyle = "#009966";

        context.beginPath();

        context.arc(80,80,5,0,Math.PI*2,true);

        context.closePath();

        context.fill();



        context.strokeStyle = "#000000";

        context.fillStyle = "#FFFFFF";

        context.beginPath();

        context.arc(120,80,8,0,Math.PI*2,true);

        context.closePath();

        context.stroke();

        context.fill();



        context.fillStyle = "#009966";

        context.beginPath();

        context.arc(120,80,5,0,Math.PI*2,true);

        context.closePath();

        context.fill();



        // Create the diamond-shaped nose

        context.fillStyle = "#000000";

        context.beginPath();

        context.moveTo(93,100);

        context.lineTo(100,93);

        context.lineTo(107,100);

        context.lineTo(100,107);

        context.closePath();

        context.fill();



        // Add the smile

        context.strokeStyle = "#000000";

        context.beginPath();

        context.moveTo(70,110);

        context.quadraticCurveTo(100,150,130,110);

        context.quadraticCurveTo(100,150,70,110);

        context.closePath();

        context.stroke();

    }

}

Y por ultimo el HTML

Código:
<canvas height="200" width="200" id="myDrawing">

            <p>Your browser doesn't support canvas.</p>

        </canvas>

Pruebenlo y fijense lo q sale con solo este codigo y sin usar ninguna imagen...

Saludos



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Tutorial Aporte - Popunder Javascript para cualquier link de tu elección! Kevin Alfonso 1 2,672 19-06-2016, 07:29 PM
Último mensaje: Nomak
  Tutorial Cómo utilizar Javascript para reproducir un archivo Roberto 2 3,130 19-06-2016, 07:22 PM
Último mensaje: Nomak
  Tutorial Cómo utilizar Javascript para actualizar un Título Roberto 0 2,228 05-12-2015, 07:12 PM
Último mensaje: Roberto
  Cómo pasar variables de Javascript a PHP y viceversa torgar22 0 3,061 23-08-2015, 11:09 AM
Último mensaje: torgar22
  Sistemas de logueo JavaScript torgar22 0 1,656 18-06-2015, 12:03 PM
Último mensaje: torgar22



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018