canvas sprites

Vamos a utilizar el archivo PNG siguientes como fuente de nuestra secuencia de sprites: Secuencia sprites PNG

Estructura HTML5
<! DOCTYPE html> < cabeza > < meta charset = "UTF-8" /> < ttulo > Animacin Sprites en HTML5 Canvas </ titulo > </ cabeza > < cuerpo > < lona Identificacin = "myCanvas" ancho = "100" altura= "100" > <- Introduce contenido de reserva aqu -> Lo sentimos, su navegador no soporta la tecnologa de lona </ canvas > < script de > / / Guin va aqu </ escritura > </ cuerpo > </ HTML >

Vamos a crear un lienzo para mostrar nuestros sprites y establecer la anchura, la altura de la tela de 100px. Por favor, tenga en cuenta que, la anchura y la altura de cada fotograma de la secuencia de sprites PNG es de 100 pxeles:

Adems, recuerde que debe asignar un identificador para nuestro elemento canvas. En este caso, lo nombramos como myCanvas . Y eso es todo por la estructura HTML! Ahora, echemos un vistazo a la seccin de JavaScript.

JavaScript
<script> var width = 100, Altura = 100, marcos = 4, currentFrame = 0, canvas = document.getElementById ( "myCanvas" ); ctx = canvas.getContext ( "2d" ); image = nueva imagen () image.src = 'sprite.png' ; var = sorteo funcin () { ctx.clearRect (0, 0, ancho, alto); ctx.drawImage (Imagen, 0, * currentFrame altura, anchura, altura, 0, 0, ancho, alto); si (== currentFrame frames) { currentFrame = 0; } ms { currentFrame + +; } } setInterval (sorteo, 100); </ Script>

Como hemos visto, la primera cosa que hacemos en la seccin JavaScript es definir las variables: Ancho: El ancho de la tela. Altura: La altura de la lona. Marcos: Los marcos totales de los sprites animados. currentFrame: El marco actual de los sprites animados. lienzo: Para acceder al elemento de contexto de representacin. ctx: Render del contexto lienzo en formato 2D. Imagen: Una variable que contiene nuestro archivo PNG. Para animar el sprite, necesitamos simplemente mostrar cada frame del sprite con drawImage () mtodo. El drawImage () es un mtodo que permite sacar la imagen o el vdeo en el lienzo. A continuacin se muestra la sintaxis y los parmetros de drawImage ():
context.drawImage (img, sx, sy, swidth, sheight, x, y, ancho, alto);

1 Parmetro

Descripcin

img sx sy swidth sheight x y ancho altura

Especifica la imagen, lienzo, o elemento de vdeo para utilizar Parmetro opcional. La coordenada x donde empezar recortes Parmetro opcional. La coordenada y por dnde empezar el recorte Parmetro opcional. La anchura de la imagen recortada Parmetro opcional. La altura de la imagen recortada La coordenada x donde colocar la imagen en el lienzo La coordenada y dnde colocar la imagen en el lienzo Parmetro opcional. El ancho de la imagen a utilizar (estirar o reducir la imagen) Parmetro opcional. La altura de la imagen a utilizar (estirar o reducir la imagen)

A continuacin, se escribe una instruccin condicional para comprobar si el currentFrame es menos de cuadros en total, a continuacin, incrementar la currentFrame. El currentFrame se utiliza para decidir qu marco del sprite debemos mostrar en el lienzo a travs del mtodo drawImage (). Por ltimo, utilizamos setInterval () para ejecutar la funcin draw cada 100 milisegundos. Como hemos visto, la primera cosa que hacemos en la seccin JavaScript es definir las variables: Ancho: El ancho de la tela. Altura: La altura de la lona. Marcos: Los marcos totales de los sprites animados. currentFrame: El marco actual de los sprites animados. lienzo: Para acceder al elemento de contexto de representacin. ctx: Render del contexto lienzo en formato 2D. Imagen: Una variable que contiene nuestro archivo PNG. Para animar el sprite, necesitamos simplemente mostrar cada frame del sprite con drawImage () mtodo. El drawImage () es un mtodo que permite sacar la imagen o el vdeo en el lienzo. A continuacin se muestra la sintaxis y los parmetros de drawImage (): context.drawImage (img, sx, sy, swidth, sheight, x, y, ancho, alto); Parmetro Descripcin img: Especifica la imagen, lienzo, o elemento de vdeo para utilizar sx: Parmetro opcional. La coordenada x donde empezar recortes sy: Parmetro opcional. La coordenada y por dnde empezar el recorte swidth: Parmetro opcional. La anchura de la imagen recortada sheight: Parmetro opcional. La altura de la imagen recortada x: La coordenada x donde colocar la imagen en el lienzo y: La coordenada y dnde colocar la imagen en el lienzo ancho: Parmetro opcional. El ancho de la imagen a utilizar (estirar o reducir la imagen) altura: Parmetro opcional. La altura de la imagen a utilizar (estirar o reducir la imagen) A continuacin, se escribe una instruccin condicional para comprobar si el currentFrame es menos de cuadros en total, a continuacin, incrementar la currentFrame. El currentFrame se utiliza para decidir qu marco del sprite debemos mostrar en el lienzo a travs del mtodo drawImage (). Por ltimo, utilizamos setInterval () para ejecutar la funcin draw cada 100 milisegundos. Eso es todo! Guarde el documento y ejecutarlo en el navegador con el apoyo! // ]]> ARCHIVO FINAL <!DOCTYPE html> <head> <title>Demo: Animating Sprites In HTML5 Canvas</title> </head> <body> <canvas id=myCanvas width=100 height=100> <! Insert fallback content here > Sorry, your browser doesnt support canvas technology </canvas> <script> var width = 100,

height = 100, frames = 4, currentFrame = 0, canvas = document.getElementById(myCanvas); ctx = canvas.getContext(2d); image = new Image() image.src = sprite.png; var draw = function(){ ctx.clearRect(0, 0, width, height); ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height); if (currentFrame == frames) { currentFrame = 0; } else { currentFrame++; } } setInterval(draw, 100); </script> </body> </html>

galeria canvas
Indicaciones: * Los marcos son de tipo png y estan en la pestaa Imagenes en canvas. * Las imagenes de las fotos se pueden descargar y dejar con el nombre de fotoO.png foto7.png Pasos: 1. Crear el documento y colocar el Estilo. <style> #botones { width: 500; height: 50; } #botones td { background: #0B75AF; color: #e9f8ff; text-align: center ; } </style> 2. Script colocar segun el codigo- no COPIAR y PEGAR no FUNCIONARA <script> var cv , ctx ,ancho,alto; var marcos = []; var indiceMarcos=0; var fotos=[]; var indiceFotos=0; // Cargar Marcos 6 en total for (i=0;i<=6;i++){ marcos[i]= new Image(); marcos[i].src=marco+i+.png; } // Cargar fotos 7 en total for (i=0;i<=7;i++){ fotos[i]= new Image();

fotos[i].src=foto+i+.jpg; } function inicio(){ cv=document.getElementById(canvas); ctx=cv.getContext(2d); ancho=cv.width; alto=cv.height; // Trazar la primer foto y marco cambioMarco(0); } function cambioMarco(cuantos){ // Primero repintar la foto de fondo indiceMarcos += cuantos; indiceMarcos = indiceMarcos>=marcos.length ? 0 : indiceMarcos; indiceMarcos = indiceMarcos<0 ? marcos.length-1 : indiceMarcos; cambioFoto(0); } function cambioFoto(cuantos){ indiceFotos += cuantos; indiceFotos = indiceFotos>=fotos.length ? 0 : indiceFotos; indiceFotos = indiceFotos<0 ? fotos.length-1 : indiceFotos; cv.width = cv.width; // al cambiar foto mostrar foto actual y marco ctx.drawImage(fotos[indiceFotos],0,0,ancho,alto); ctx.drawImage(marcos[indiceMarcos],0,0,ancho,alto); } window.onload=inicio; </script> 3. Codigo de la TABLA Y CANVAS <table id=botones> <tr><td onclick=cambioFoto(-1) >Foto Anterior</td><td onclick=cambioFoto(+1)>Foto Siguiente</td></tr> <tr><td onclick=cambioMarco(-1) >Marco Anterior</td><td onclick=cambioMarco(+1)>Marco Siguiente</td></tr> </table> <canvas id=canvas width=500 height=500></canvas>

Imagenes
sprites tarea 1

marcos tipo PNG( marco0.png,marco1.png,marco2.png marco6.png)

sprites 2

TAREA 1
LA IMAGEN DE FONDO PUEDE SER CUALQUIERA *** IMAGEN DE LUPA CODIGO DE ANIMACION DE LA LUPA

Tarea 2 Sprites

Primero: Estilo de la etiqueta. Colocarlo despus de la etiqueta <head> <style> body { margin:0; padding:0; } canvas { display:block; margin:20px auto 0; border:1px dashed #ccc; } </style> Segundo: colocar la etiqueta <canvas> en el <body> !!! Cuidado con las comillas <canvas id=canvas width=500 height=400></canvas> Tercero: colocar el codigo <script> var canvas, ctx, sprites, width = 500, height = 400, rightKey = false, leftKey = false, upKey = false, downKey = false, topKey=false, bottomKey = false, nave_x = (width / 2) 25, nave_y = height 85, nave_w = 65, nave_h = 85, srcX = 10, srcY = 0; function clearCanvas() { ctx.clearRect(0,0,500,400); //limpieza de canvas } function drawNave() { if (rightKey) { //posicion de frames a ver 0,83,156,233,307 nave_x += 5; srcX = 75; //frame 0 } else if (leftKey) { nave_x -= 5; srcX = 155; //frame 1 } //nuevo else if (topKey) { nave_y -= 5; srcX = 233; //frame 2 } else if (bottomKey) { nave_y += 5; srcX = 307; //frame 3 } ctx.drawImage(sprites,srcX,srcY,nave_w,nave_h,nave_x,nave_y,nave_w,nave_h); if (rightKey == false || leftKey == false) { srcX = 10; } } function loop() { //lazo de llamada clearCanvas(); drawNave();

} function keyDown(e) { //al presionar las teclas if (e.keyCode == 39) rightKey = true; else if (e.keyCode == 37) leftKey = true; else if (e.keyCode == 38) topKey = true; else if (e.keyCode == 40) bottomKey = true; } function keyUp(e) { //al soltar las teclas if (e.keyCode == 39) rightKey = false; else if (e.keyCode == 37) leftKey = false; else if (e.keyCode == 38) topKey = false; else if (e.keyCode == 40) bottomKey = false; } (function init() { //Inicio y carga de eventos canvas = document.getElementById(canvas); ctx = canvas.getContext(2d); sprites = new Image(); sprites.src = ships2.png; setInterval(loop, 1000/30); document.addEventListener(keydown, keyDown, false); document.addEventListener(keyup, keyUp, false); })();

Ejercicios
<!DOCTYPE html> <html> <script> var can = function () { var canvas; var context; return { draw: function () { var r = Math.floor(Math.random() * 255) + 70; var g = Math.floor(Math.random() * 255) + 70; var b = Math.floor(Math.random() * 255) + 70; var s = rgba( + r + , + g + , + b + , 0.5); context.rotate(0.2 * Math.PI); context.fillStyle = s; context.fillRect(10, 0, 150, 50); }, init: function () { canvas = document.getElementById(c); context = canvas.getContext(2d); context.translate(200, 250); setInterval(can.draw, 250); } } } (); window.onload = can.init; </script> <body> <canvas id=c width=470 height=470></canvas> </body> </html>