Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Practica 2 Transformaciones en Javascript y Java

    Încărcat de

    Raul Enrike Dzidz Ku
    79 vizualizări11 pagini
    practica

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    practica

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    79 vizualizări11 pagini

    Practica 2 Transformaciones en Javascript y Java

    Încărcat de

    Raul Enrike Dzidz Ku
    practica

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 11

    INSTITUTO TECNOLGICO SUPERIOR DE FELIPE CARRILLO PUERTO

    GRAFICACION
    PRACTICA N (1)
    (SUBLIME TEXT)
    Aplicacin de las funciones primitivas con canvas y JavaScript

    (Raul Enrique Dzidz Ku, 6, B)


    (29-02-16)

    DOCENTE: PALOMA GONGORA SABIDO

    1 PRACTICA N 2: (TRANSFORMACIONES JAVASCRIPT Y JAVA)


    1.1 OBJETIVO
    Aprender a realizar trasformaciones en javascript con canvas y en java con las funciones que cada uno de
    estos lenguajes manejen.

    1.2

    MATERIALES/RECURSOS

    1 Pc
    El software para la escritura del cdigo (Sublime Text) para javascript y
    canvas, y Netbeans para programar en java.
    Y las funciones que previamente se investigaron.

    1.3 CONCEPTOS BASICOS


    Canvas: es un elemento HTML incorporado en HTML5 que permite la generacin de
    grficos dinmicamente por medio del scripting. Permite generar grficos estticos y
    animaciones. Cualquier texto dentro de este elemento se mostrar solo en los
    navegadores que no soportan el canvas.
    .fillStyle: Funcin de JavaScript encargada de rellenar el color de la figura en el canvas.
    .fillRect: Funcin de JavaScript encargada de trazar rectngulos en el canvas.

    .strokeStyle: Funcin de JavaScript que sirve para dibujar el contorno de la figura.


    .closePath: Sirve para cerrar un camino, volviendo a su punto inicial de dibujo.
    .Stroke: Mtodo para dibujar una lnea por todo el recorrido del camino que
    hayamos creado por medio de sus distintos segmentos.
    .Fill: Mtodo para confirmar el relleno de la funcin fillStyle.
    .beginPath: Esta funcin sirve para decirle al contexto del canvas que vamos a
    empezar a dibujar un camino.
    .lineWidth: Propiedades anchura de lnea o devuelve el ancho de la lnea actual
    en pxeles.
    .scale: escala la figura que deseemos.

    .rotate: gira la figura en los angulos que queramos.


    .traslate: traslada o mueve una figura a otro punto en el plano

    <script>:El elemento < script> o bien contiene declaraciones de secuencias de


    comandos , o seala a un archivo de script externo a travs del atributo src.
    .getContext():Mtodo devuelve un contexto de dibujo en el lienzo , o null si no se
    admite el identificador de contexto.

    1.4 PROCEDIMIENTO
    1.4.1 PASO 1
    Lo primero que se hace es abrir el sublime text y creamos la estructura bsica de
    un documento HTML .

    1.4.2 Paso 2
    Lo siguiente ser crear la estructura del canvas que consta de una etiqueta
    <canvas></canvas> el cual contendr el tamao que nosotros queramos y le
    damos un id para identificar nuestro canvas.

    1.4.3 Paso 3
    Crear la etiqueta <script></script> el cual no sirve para agregar cdigo JavaScript y le
    damos el atributo type con el valor text/javascript, a nuestro documento dentro de la
    etiqueta <body></body>.

    1.4.4 Paso 4
    Dentro de la etiqueta de nuestro script creamos dos variables que nos servirn para
    crear las figuras 2D.

    La primera variable hace el llamado al canvas que creamos en el body. Tambin


    creamos una variable llamada dibujo para poder trabajar con el contexto 2D. y con
    esto ya podemos comenzar a dibujar nuestras funciones.

    1.4.5 Dibujar un rectngulo


    Crear un cuadrado es algo sencillo, solo tenemos que hacer el llamado a la funcin
    fillRect, en la cual definimos las coordenadas (x, y) de inicio y el ancho del largo del
    cuadrado.

    1.4.6 Traslado del rectngulo


    Para hacer el traslado utilizaremos la funcin traslate que requiere de dos parmetros
    que son (x) y (y) que nos dibujara el rectngulo en otra parte de nuestro canvas con
    los mismos valores.

    1.4.7 Rotacin
    La funcin rotate utiliza una funcin matemtica, que utiliza los radianes para hacer
    rotar la figura en este caso nuestro rectngulo. Un radian es igual a 180 este valor es
    dividido entre el valor que coloquemos despus de nuestra funcin math.PI/ en este
    caso 5 y nos da como resultado 36.

    1.4.8 Escala
    La funcin scale nos permite duplicar el tamao original del rectngulo ya que
    utilizamos los valores (2,2), esta funcin multiplica por dos los valores que se le tienen
    asignado a nuestro rectngulo original.

    1.5 PROCEDIMIENTO EN JAVA

    1.5.1 PASO 1
    Lo primero que se debe realizar es abrir el editor de cdigo Netbeans y crear un nuevo
    proyecto al cual llamaremos Primitivas, senos crea la funcin principal con el mismo
    nombre agregamos un nuevo java class con el nombre de Funciones. La siguiente
    imagen nos muestra como quedara nuestro proyecto.

    1.5.2 PASO 2
    Ya que ctengamos las dos clases la Principal (Primitivas) y Funciones. En la clase
    principal importaremos las libreras que se utilizaran java.awt.Color;, y
    javax.swing.JFrame; el primero para asignarle color a nuestro frame y el segundo es
    para que importar un JFrame que ser donde se dibujen las funciones.

    En la misma clase crearemos unas variables que nos servirn. Estos son c que nos indica
    que new JFrame se llamara Funciones primitivas la siguiente lnea es para que al
    cerrar el frame el proceso termine, lo siguiente es llamar a la clase Funciones con la
    variable e. le asignamos un color de fondo con el setBackground, tambin un tamao
    con setSize y hacemos que sea visible.

    1.5.3 PASO 3
    En la clase Funciones importamos las libreras que se usaran para dibujar las libreras,
    Font para fuente, Graphics para dibujar graficos 2d, y el Jpanel.

    Despus declaramos que la clase funciones es una extensin de la clase Primitivas ya


    que las variables declaradas en la clase Primitivas se usaran en la clase Funciones, y
    declaramos una variable privada del tipo entero llamada stringY.

    1.5.4 PASO 4
    Creamos un public void con el nombre de paintComponent y le pasamos el
    parmetro Graphics y le pasamos la variable e que declaramos en la clase principal,

    1.5.5 Dibujamos cuadrado


    La creacin del cuadrado es igual que la del rectngulo, se hace con la funcin
    fillRect, lo nico que cambia es que los valores de la altura y de anchura deben ser
    idnticos, contrario al del rectngulo, los cuales podan ser distintos.

    1.5.6 Traslado en java


    Para realizar el traslado de un objeto en java al igual que en javascript utilizamos la
    funcin traslate la cual nos pide dos valores los cuales utiliza que son las coordenadas
    donde se localizara el cuadrado que se trasladara despus de la funcin traslate
    dibujamos de nuevo nuestro cuadrado.

    1.5.7 Escala en java


    Ahora veremos la forma de escalar un objeto en java la funcin que utilizaremos es
    scale que de igual manera nos pide dos valores los cuales como en el javascript son los
    valores por el cual duplicara o triplicara en tamao del cuadrado.

    1.5.8 Rotacin en java


    La rotacin en java nos pide tres valores a diferencia del javascript que utilizbamos la
    librera math, aqu no se utiliza ya que la funcin rotate nos pide los grados que rotara
    la figura y el valor inicia donde comenzara la rotacin y donde termina.

    1.6

    RETROALIMENTACIN FINAL

    como pudimos observar las funciones que maneja javascript para la traslacin y la
    escala son similares,a diferencia de lo que es el rotate que utiliza la librera Math y los
    radianes en el javascript y en java utiliza tres valores que son los grados de rotacin y
    los valores de inicio y fin de nuestra rotacin.

    S-ar putea să vă placă și