Ing. Honoria Reyes Macedo
INTRODUCCION: En esta practica se probaran eventos de teclado y
eventos del mouse asi como instrucciones que ejecuten la carga del dibujo en
intervalos de tiempo
ACTIVIDADES
1.- Crear un archivo canvasEventos.html.
a) En una sección del archivo crear el canvas
b) Agregar antes de cerrar <body> la ruta del script que se
utilizara en el canvas.
Ejemplo:
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>Documento
sin título</title>
</head>
<body>
<section>
<canvas style="background:#FC3"
id="cvaPacman" >Aqui va un canvas</canvas>
</section>
<script src="js/miPacman.js"></script>
</body>
</html>
2.- Crear el archivo miPacman.js en una carpeta
js y poner el siguiente codigo:
// JavaScript Document
var micanvas = document.getElementById("cvaPacman");
var canvas=micanvas.getContext("2d");
micanvas.height=500;
micanvas.width=600;
var x=80;
var y=80;
var radio=55;
var micanvas = document.getElementById("cvaPacman");
var canvas=micanvas.getContext("2d");
micanvas.height=500;
micanvas.width=600;
var x=80;
var y=80;
var radio=55;
var anguloInicial = 1.75*Math.PI;
var anguloFinal = 0.25*Math.PI ;
function
dibujar(){
canvas.beginPath(); //Empieza nueva figura
canvas.fillStyle="#3C3";
canvas.beginPath(); //Empieza nueva figura
canvas.fillStyle="#3C3";
canvas.arc(x,y,radio,anguloInicial,anguloFinal,true); //Dibuja circulo
canvas.lineTo(x,y);
canvas.stroke(); //Dibuja el contorno
canvas.fill(); //Llena de color
}
function iniciar(){
canvas.lineTo(x,y);
canvas.stroke(); //Dibuja el contorno
canvas.fill(); //Llena de color
}
function iniciar(){
canvas.clearRect(0,
0, micanvas.width, micanvas.height);
dibujar();
requestAnimationFrame(iniciar); //Ejecuta el codigo
dibujar();
requestAnimationFrame(iniciar); //Ejecuta el codigo
}
iniciar();
iniciar();
Nota: Observar que se
utiliza canvas.arc(x,y,radio,anguloInicial,anguloFinal,true); para dibujar el circulo. utiliza las variables x, y para dar
su ubicación y la variable radio; su angulo de inicio es de 0.25*Math.PI (Equivale
a 45º ), su angulo final es de 1.75*Math.PI
(Equivale a 315º), Antihorario=false.
EQUIVALENCIA DEL ANGULO
2*Math.PI =360º
Math.PI =180º
0.5*Math.PI =90º
0.25*Math.PI =45º
1.5* Math.PI =270º
1.75*Math.PI =315º
El sentido de la
circunferencia que une los dos puntos es Antihorario
Los grados del circulo inician hacia abajo
Probar en el navegador
3.- Agregar eventos para las teclas de desplazamiento(flecha
izquierda, derecha, arriba, abajo)
a)
Agregar los eventos de las
teclas: 38(Arriba), 40(abajo), 37(izquierda),
39(derecha)
var rightPressed = false;
var leftPressed = false;
var downPressed =false;
var upPressed = false;
document.addEventListener("
document.addEventListener("
document.addEventListener("
function
tocaTecla(e) {
if(e.keyCode == 39) {
rightPressed = true;
}else if(e.keyCode
== 37) {
leftPressed = true;
}else if(e.keyCode
== 38) {
upPressed = true;
}else if(e.keyCode
== 40) {
downPressed = true;
}
}
function sueltaTecla(e) {
rightPressed =
false;
leftPressed =
false;
upPressed = false;
downPressed =
false;
}
b)
Agregar esas respuestas al
metodo iniciar().
(
El desplazamiento izquierda/derecha modifican la variable x,
El desplazamiento arriba/abajo modifican la
variable y )
function iniciar(){
canvas.clearRect(0,
0, micanvas.width, micanvas.height);
dibujar();
if(rightPressed
&& x < micanvas.width-radio) {
x
+= 1;
}
else
if(leftPressed && x > 80) {
x
-= 1;
}
else
if(downPressed && y < micanvas.height-radio) {
y
+= 1;
}
else
if(upPressed && y > 80) {
y
-= 1;
}
requestAnimationFrame(iniciar);
}
4.- Variar el angulo de abertura del circulo de acuerdo al sentido
de las flechas.
En la funcion dibujar()
agregar las lineas en rojo.
function
dibujar(){
canvas.beginPath(); //Empieza nueva figura
canvas.fillStyle="#3C3";
canvas.beginPath(); //Empieza nueva figura
canvas.fillStyle="#3C3";
if(rightPressed){
anguloInicial
= 1.75*Math.PI;
anguloFinal
= 0.25*Math.PI;
}else if(leftPressed) {
anguloInicial
= 0.75*Math.PI;
anguloFinal
= 1.25*Math.PI ;
}else if(downPressed) {
anguloInicial
= 0.25*Math.PI;
anguloFinal
= 0.75*Math.PI;
}else if(upPressed) {
anguloInicial = 1.25*Math.PI;
anguloFinal
= 1.75*Math.PI ;
}
canvas.arc(x,y,radio,anguloInicial,anguloFinal,true); //Dibuja circulocanvas.lineTo(x,y);
canvas.stroke(); //Dibuja el contorno
canvas.fill(); //Llena de color
}
5.- Agregar la funcion siguiente y llamarla desde el metodo iniciar()
function instruccion(){
canvas.font="12px
Arial";
canvas.fillStyle="#00C";
canvas.fillText("Usa
las flechas de desplazamiento",15,15);
}
Probar desde el navegador
-------------------------------0-0------------------------------------------------------------------------
----------------------------000-000---------------------------------------------------------------------
