Ing. Honoria Reyes Macedo
INTRODUCCION: En esta practica se dara
movimiento a los distintos graficos(canvas y svg) asi como imagenes de html.
Para llevar a cabo esta actividad se debera
tener una pagina html dividida en varias secciones
1.- Animacion de imagen en html
1.1 Copiar una
imagen de un rehilete en una carpeta img
1.2 En una
seccion de la pagina html copiar el siguiente codigo
<img src="img/rehilete.jpg">
1.3 En el
archivo estilos.css que se encuentra en la carpeta css poner el siguiente
codigo y
le da movimiento de 360 grados (Dar
formato a la imagen)
img {
width: 100px;
height: 100px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: red;
-webkit-animation-name:
rotate; /* Chrome, Safari, Opera */
-webkit-animation-duration:
4s; /* Chrome, Safari, Opera */
animation-name: rotate;
animation-duration: 4s;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to
{transform: rotate(360deg);}}
@-webkit-keyframes rotate
{from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}}
2.- Animacion de canvas con javaScript
2.1 El
contenido del archivo miscanvas.js ponerlo dentro de una funcion
(Contenido que solo
dibuja el fondo)
function
fondo(){
//Aquiva el contenido para dibujar
}
2.2 Agregar al
principio de miscanvas.js la declaracion de variables
globales
Nota: 140, 330 son
las coordenas “X” y 160 es la coordena “Y” de los iris de los ojos creados en
la practica anterior
(Deberas modificarlos de acuerdo a tu canva)
var coX = [140,330];
var coY = 160;
var
tempX=0, tempY=0;
var vx= 5,
vy= 2;
miCANVAS.addEventListener("mousemove",
function(event)
{
ObtenerXY(event); //( es una
funcion para cambiar las coordenadas)
});
2.3 Crear la funcion ObtenerXY(), asi como la
funcion dibujar() y ejecutarla por intervalos
function ObtenerXY(e){
try{
tempX=e.pageX;
tempY=e.pageY;
// alert(tempX + "..."
+tempY);
coX =
[140+tempX/document.body.scrollWidth*190,
330+tempX/document.body.scrollWidth*190];
coY =
100+tempY/document.body.scrollHeight*100;
}catch(err) {
alert(err.message);
}
return true;
}
//Ejecutar por intervalos el metodo dibujar
setInterval(function(){dibujar("cva009");},60); //setTimeout()
function
dibujar(cual){
var
miCANVA = document.getElementById(cual);
if (miCANVA.getContext) {
var canvas=miCANVA.getContext("2d");
try{
canvas.clearRect(0,0, canvas.width,
canvas.height);
ObtenerXY;
canvas.fillStyle ="#0c0a15";
fondo();
canvas.beginPath(); //Empieza
nueva figura
//Genera un arco o un
circulo en 135,60 con radio 30
canvas.arc(coX[0],coY,30,0,Math.PI
*2,true);
canvas.fill();
canvas.beginPath(); //Empieza nueva figura
//Genera un arco o un
circulo en 135,60 con radio 30
canvas.arc(coX[1],coY,30,0,Math.PI
*2,true);
canvas.fill();
}catch(err) {
alert(err.message);
}
}
}
3.- Imagen en javaScript
3.1.- En una seccion
de la pagina html copiar el siguiente codigo
<canvas id="cva010" >Aqui va algo</canvas>
3.2.- En el archivo miscanvas.js
que se encuentra en la carpeta js poner el siguiente codigo
var miCANVA10 =
document.getElementById("cva010");
var
canva10 = miCANVA10.getContext("2d");
var imgss= new Image();
imgss.src='img/slide-1.jpg';
imgss.onload =function(){
canva10.drawImage(imgss,0,0); //Imagen normal
// *****
canva10.drawImage(imgss,120,0, 150,107);
// escalado imagen completa
// escalado de una porción desde
10,15,80,60
canva10.drawImage(imgss,10,15,80,60,180,60,150,107);
canva10.strokeStyle
= 'yellow';
canva10.strokeRect
(10,15,80,60); // rectángulo amarillo
}
4.- Animacion de SVG en html
4.1.- Crear un logo utilizando un editor para generar
codigo SVG
Ejemplo de software editor a utilizar:
Ejemplo de software editor a utilizar:
* Ilustrator ,
Instalarlo y arrastrar las
herramientas para formar tu imagen
4.2.- Agregarlo a <header> de nuestras paginas html
4.2.- Agregarlo a <header> de nuestras paginas html
Ejemplo de un circulo :
<svg><circle id="circ001" cx="40"
cy="40" r="25" fill="yellow"
stroke="blue" stroke-width="4"></svg>
4.3.- Agregar el siguiente codigo al archivo estilos.css
#circ001{
transition: 2.5s ease;
-moz-transition:
2.5s ease; /* Firefox */
-webkit-transition:
2.5s ease; /* Chrome - Safari */
-o-transition:
2.5s ease; /* Opera */
}
#circ001:hover{
position: relative;
-webkit-transition-duration:
4s;
transform: rotate(30deg)
scale(1,3);
-ms-transform:rotate(30deg) scale(1,3);
-moz-transform:rotate(30deg) scale(1,3));
-o-transform:rotate(30deg) scale(1,3);
-webkit-transform:rotate(30deg) scale(1,3);
transform-origin: 40% 40%;
}
**********************0*0**********************
*******************000***000*******************
*******************000***000*******************
