Scribd Logo
Upload

Welcome to Scribd!

  • Reporte de Canvas y Java Script

    Uploaded by

    MiiKee Chuumchuum
    51 views10 pages

    Original Title

    Reporte de Canvas y Java Script.docx

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    51 views10 pages

    Reporte de Canvas y Java Script

    Uploaded by

    MiiKee Chuumchuum

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    PROF.

    BUCIO GAMIO CLEMENCIA




    Reporte de canvas y JavaScript

    Miguel Bernal Yaez 630-a Programacin

    Reporte de Canvas y Java Script
    Para realizar el primer canvas utilizamos un documento html en el cual se incluyen las
    etiquetas <script type="text/javascript"> </script> las cuales indican el lenguaje en el que
    se va a programar, realmente toda la magia la haremos en JavaScript. Primero debemos
    referenciar el elemento canvas y adquirir su contexto (API). Por el momento el nico
    contexto disponible es el contexto bidimensional.

    var canvas = document.getElementById('entorno_canvas');
    var context = canvas.getContext('2d');

    Puede parecerte que dibujar usando cdigo JavaScript es algo tedioso y pesado,
    pero lo cierto es que cuando le pillas el punto puede ser muy divertido. De
    momento, vamos a especificar el color del trazo:
    context.strokeStyle = '#8f9814';
    Cualquier cosa que dibujemos tendr un contorno de color verde. Para visualizar
    este ejemplo, vamos a dibujar un rectngulo:
    context.strokeRect (20, 30, 100, 50);
    La sintaxis del mtodo strokeRect es como sigue strokeRect (izquierda, arriba, ancho,
    largo). Por lo tanto, en el ejemplo anterior, hemos dibujado un rectngulo
    posicionado a 20 pixels del margen izquierdo y 30 del derecho con un tamao de
    10050 pixels.


    Si por ejemplo queremos dibujar un rectngulo relleno con color, deberemos de especificar
    el color del relleno:
    context.fillStyle = '#ff8f43';
    Y dibujar un rectngulo con relleno:
    context.fillRect(20, 30, 100, 50);

    Y si quiero hacer un rectngulo con trazo y relleno?. Pues generamos uno dentro
    del otro y listo:
    context.fillRect(20, 30, 100, 50);
    context.strokeRect(19, 29, 101, 51);



    En Canvas no hay funciones definidas para dibujar formas poligonales (salvo para el
    rectngulo), no existen funciones para dibujar tringulos, pentgonos, etc. La forma de
    trabajar con Canvas es dibujar "formas" o "caminos
    lienzo.
    1. stroke() dibuja una forma abierta o cerrada, sin color de relleno. Si hacemos coincidir el
    ltimo punto con el primero la forma ser cerrada.
    2. fill() dibuja una forma cerrada con el color de relleno actual. Si la forma estaba abierta, la
    propia funcin fill() crea una lnea recta desde el ltimo punto al punto inicial para cerrarla.
    Ejemplo del cdigo
    Forma cerrada con relleno
    contexto.beginPath();
    contexto.moveTo(200,50);
    contexto.lineTo(200,150);
    contexto.lineTo(300,150);
    contexto.fill();



    Formas curvadas
    Para dibujar curvas diponemos de tres mtodos bsicos. 1. Arcos. 2. Curvas de Bezier. 3.
    Curvas cuadrticas.
    1. Arcos.
    Para dibujar arcos tenemos la funcin:
    arc(x, y, radio, ngulo inicial, ngulo final, sentido de giro)
    Donde los parmetros (x,y) son las coordenadas del centro de la circunferencia cuyo arco
    vamos a dibujar. El parmetro radio es el radio de dicha circunferencia. La amplitud del
    arco ir desde el ngulo inicial al ngulo final en el sentido de las agujas del reloj. Los
    ngulos se miden en radianes. La equivalencia con los grados nos la da esta expresin:
    radianes = (Math.PI/180)*grados. Donde Math.PI es el nmero Pi (3,1416...)
    Ejemplo
    Arco desde 0 grados hasta 90 grados en sentido contrario de las agujas
    del reloj
    contexto.beginPath();

    contexto.arc(200,60,50,radianes('0'),radianes('90'),true);
    contexto.stroke();







    Trabajo realizado con canvas
    En este archivo disee una carita usando las opciones de canvas el cual el cdigo es este:
    <html>
    <head>
    <title>creando una carita con canvas</title>
    </head>
    <body>
    <canvas id="tutorial" width="520" height="520" style="border: 1px solid gray;">
    Tu navegador no soporta canvas. Actualizalo
    </canvas>
    <script type="text/javascript">{
    var c=document.getElementById("tutorial");
    var cxt=c.getContext("2d");
    cxt.fillStyle = 'blue';
    cxt.strokeStyle=('black');
    cxt.beginPath();
    cxt.arc(100,150,50,0,Math.PI*2,true);
    cxt.closePath();
    cxt.stroke();
    cxt.beginPath();
    cxt.arc(100,150,25,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    cxt.beginPath();
    cxt.arc(300,150,50,0,Math.PI*2,true);
    cxt.closePath();
    cxt.stroke();
    cxt.beginPath();
    cxt.arc(300,150,25,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
    cxt.beginPath();
    cxt.arc(200,210,200,0,Math.PI*2,true);
    cxt.closePath();
    cxt.stroke();


    cxt.beginPath();
    cxt.arc(200,250,50,radianes('18'),radianes('155'));
    cxt.stroke();
    } function radianes(grados){
    var radianes = (Math.PI/180)*grados;
    return radianes;
    }
    </script>
    </body>
    </html>


    El cual es el resultado es este mostrado en el navegador



    En este ejercicio tenamos que desarrollar un triangulo con el fondo verde y el contorno de otro
    color

    Este es el cdigo:
    <html>
    <head>
    <title>Ejemplo2 Canvas </title>
    <script type="text/javascript">
    function mikeCanvas(){
    var pudin = document.getElementById('miCanvas');
    var arbol = pudin.getContext('2d');
    arbol.fillStyle = 'green';
    arbol.strokeStyle=('red');
    arbol.beginPath();
    arbol.moveTo(250,50);
    arbol.lineTo(200,150);
    arbol.lineTo(300,150);
    arbol.fill();
    arbol.beginPath();
    arbol.moveTo(250,50);
    arbol.lineTo(200,150);
    arbol.lineTo(300,150);
    arbol.closePath();
    arbol.stroke(); }
    </script>
    </head>
    <body onLoad="mikeCanvas();">
    <canvas id="miCanvas" width="500" height="300">Su navegador es nena :P.</canvas>
    </body>

    You might also like