Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 3 vistas

    Taller Canvas

    Cargado por

    Wilfredo Cotrado

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    Taller Canvas

    Cargado por

    Wilfredo Cotrado
    3 vistas3 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    3 vistas3 páginas

    Taller Canvas

    Cargado por

    Wilfredo Cotrado

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    Está en la página 1de 3

    Desarrollo de Java script Canvas

    1.- Desarrollamos Html

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <style>
    #mycanvas {
    border: 1px solid #333;
    }
    </style>
    </head>
    <body>
    <h1>Canvas</h1>
    <canvas id="mycanvas" width="500" height="500">
    </canvas>
    <script src="canvas.js">
    </script>
    </body>
    </html>

    2.- javascript

    //archivo para dibujar canvas

    //var puntaje = 0;

    // estudiante = "Carlos";

    var estu="1"+1;

    var esta="1"-1;

    //los objetos tienen propiedades y metodos

    //las propiedaddes son caracteristicas

    //los metodos son funciones

    //Ejemplos:para el objeto carro

    //carro.color = "red";

    //carro.acelerar(100);

    //get y set
    var canvas = document.getElementById("mycanvas");

    //2.obtener contexto

    var c= canvas.getContext("2d");

    //3. entender las coordenadas (x,y)

    //4. a dibujar

    // c.moveTo(250,250);

    // c.lineTo(0,500);

    // c.lineTo(500,250);

    // c.lineTo(250,250);

    // c.stroke();

    // c.beginPath();

    // c.moveTo(0,0);

    // c.lineTo(200,200);

    // c.strokeStyle = "green";

    // c.lineWidth = 20;

    // c.stroke();

    /////////////////////

    var w=canvas.width;

    var h=canvas.height;

    // c.beginPath();

    // c.moveTo(w/2,h/2);

    // c.lineTo(w*0.75,h*0.75);

    // c.lineTo(w*0.25,h*0.75);

    // c.closePath();

    // c.strokeStyle="red";

    // c.lineWidth=5;
    // c.fillStyle="yellow";

    // c.fill();

    // c.stroke();

    /////////////////////////////

    //c.rect(10,10,300,100);

    //c.fill();

    //c.fillRect(10,10,300,100);

    //////////////////

    //c.arc(x,y,r,startang,endang,rotacion);

    // var g = Math.PI * 2;

    // c.arc(w/2,h/2,200,g*0.1,g*0.98,true);

    // c.stroke();

    //////////////////////

    //c.fillText('texto',x,y);

    c.fillStyle = 'green';

    c.font = "italic 30px Georgia";

    c.fillText('Hola Mundo',50,100);

    c.strokeStyle = "red";

    c.font = "bold 50px Arial";

    c.strokeText("Hola Mundo",50,200);

    También podría gustarte