1. Hola Mundo
  2. fill, stroke
  3. save
  4. Primitivas
    1. Rectángulo
    2. Arco
    3. Ejercicio
    4. Hacer la página del enlace
    5. line
    6. text
    7. text- metrics
    8. image
    9. shadow
    10. gradient
  5. Convertir un svg a código del canvas de HTML5
  6. Animaciones
  7. Mejor rendimiento con requestAnimationFrame
  8. Estructura correcta del bucle infinito para hacer un videojuego
  9. Ejercicio
  10. Ejercicio
  11. Ejercicio
  12. Ejercicio
  13. Gestionando colisiones
  14. Ejercicio - llegar al tesoro
  15. Ejercicio - Añadimos el uso de sprites
  16. double buffer animation

Hola Mundo

<canvas id="canvas" width="400px" height="400px" style="border:2px solid black" />
<script>
	var c = document.getElementById("canvas");
	var ctx = c.getContext("2d");

	ctx.font = "40px Arial";
	ctx.fillText(“Hola mundo”, 50, 50);
</script>
Hola Mundo

fill, stroke

//Rectángulo sin borde
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

//Rectángulo azul (sólo borde)
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0, 0, 255, 1)";
ctx.strokeRect(70, 70, 140, 140);
			
//Borra la pantalla entera
//ctx.clearRect(0,0,400,400);
fill stroke

save

//Rectángulo sin borde
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
ctx.save();
			
ctx.fillStyle = "blue";
ctx.fillRect(60, 60, 150, 150);

//Pinto un cuadrado rojo. Si comento la siguiente línea el rectángulo se pinta en azul
ctx.restore();
ctx.fillRect(160, 160, 250, 250);
Salvar contexto

Primitivas

Rectángulo

//Rectángulo con borde
ctx.rect(40, 100, 100, 200);
ctx.fillStyle = "#8ED6FF";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.stroke();
Dibujar rectángulo

Arco

ctx.fillStyle = "green";
//arc(cx, cy, radio, inicioArco (rad), finArco(rad), sentido horario)
ctx.arc(180, 120, 60, 1* Math.PI, Math.PI * 2, true);
ctx.fill();
Dibujar arco

Ejercicio

Hacer un mini paint.

document.onmousedown = ratonPulsado;
document.onmouseup = ratonLevantado;

function ratonLevantado(){
	document.onmousemove = null;
}
function ratonPulsado(){
	document.onmousemove = ratonSeMueve;
}
	
function ratonSeMueve(event) {
	var x = event.clientX;
	var y = event.clientY;
	ctx.beginPath();
	...
	ctx.closePath();
}
Ejercicio paint

Hacer la página del enlace

Recursos

<div style="background:url(images/monstruo.png); width:1024px; height:768px;position:absolute; z-index: 10"></div>
<div style="background:url(images/cornea.png);margin-left:470px; margin-top:130px;width:182px; height:192px; position:absolute; z-index: 3"></div>
<canvas id="canvas" width="400px" height="400px" style="position:absolute;z-index:6;  margin-left:350px; border: solid black 2px"></canvas>
Ejercicio ojo

line

ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(150, 250);
ctx.lineWidth = 10;
ctx.strokeStyle = "#ff0000";
ctx.lineCap = "round"; //tres valores: butt, round, or square
ctx.stroke();
Dibujar línea

text

ctx.font = "40pt Calibri";
ctx.fillStyle = "#0000ff"; // text color
ctx.fillText("Hello World!", 50, 100);   
ctx.lineWidth = 3;
ctx.strokeStyle = "green";
//start, end, left, center, or right. left es el valor por defecto
//left equivale a start
//right equivale a end
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.strokeText("Hello World!", 50, 100);
Dibujar texto

text, metrics

var text = "Hello World!";
ctx.font = "30pt Calibri";
ctx.textAlign = "start";
ctx.fillStyle = "blue";
ctx.fillText(text, 50, 50);
// get text metrics
var metrics = ctx.measureText(text);
var width = metrics.width;
alert(width);
Medir texto

image

var imageObj = new Image();
imageObj.src = "logo.png";

imageObj.onload = function() {
	//VARIAS FORMAS DE INSERCION:
			
	//Poner la imagen:
	//(objetoImagen, posicion x, posicion y)
	ctx.drawImage(imageObj, 0, 0);
				
	//Poner la imagen redimensionando:
	//(objetoImagen, posicion x, posicion y, ancho, alto)
	ctx.drawImage(imageObj, 300, 0, 50, 50);
				
	//Poner la imagen redimensionando y recortando:
	//ctx.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, 			destWidth, destHeight);
	ctx.drawImage(imageObj, 100, 100, 180, 180,200,200, 200,200) 
};
Imágen

shadow

ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
						
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillRect(20,20,200,100);
Sombra

gradient

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
//coordenadas del punto inicial y final del degradado
var grd = ctx.createLinearGradient(0, 0, 400, 400);
grd.addColorStop(0, "pink");
grd.addColorStop(0.5, "red");
grd.addColorStop(1, "blue");
ctx.fillStyle = grd;
ctx.fillRect(0,0,400,400);
Gradiente

Convertir un svg a código del canvas de HTML5

http://www.professorcloud.com/svg-to-canvas/
window.onload = draw(ctx);

function draw(ctx) {
ctx.save();
...
Descargar SVG para probarSVG a canvas

Animaciones

Simple Animation con setInterval

Animación simple

Mejor rendimiento con requestAnimationFrame

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var posX = 100;

requestAnimationFrame(pintaCuadrado)
function pintaCuadrado(){
	console.log("aaaaaa");
	ctx.save();
	ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
	ctx.restore();	
	posX = posX + 5;
	ctx.beginPath();
	ctx.rect(posX,0,200,200);
	ctx.fill();
	ctx.closePath();
	requestAnimationFrame(pintaCuadrado)
}
Ver ejemplo requestAnimationFrame

Estructura correcta del bucle infinito para hacer un videojuego

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var x = 10;
var y = 10;
var w = 20;
var h = 30;
var speed = 2;

var update = function(){
	x +=speed;
}
var draw = function(){
	ctx.clearRect(0,0,300,300);
	ctx.fillStyle = "rgb(200, 0, 100)";
	ctx.fillRect(x, y, w, h);
}
var step = function(){
	update();
	draw();
	window.requestAnimationFrame(step);
};

step();
Ver ejemplo

Ejercicio

Siguiendo la estructura propuesta en el ejemplo anterior, dibujar un rectángulo que cuando llegue al final de la pantalla dé media vuelta.

Ver ejemplo resuelto.

Ejercicio

Utilizar el siguiente array de enemigos en lugar de uno solo.

var enemies = [
	{
    	x: 100, //x coordinate
    	y: 100, //y coordinate
    	speedY: 1, //speed in Y
    	w: 40, //width
    	h: 40 //heght
    },
    {
        x: 260,
        y: 100,
        speedY: 2,
        w: 40,
        h: 40
    },
    {
        x: 380,
        y: 100,
        speedY: 3,
        w: 40,
        h: 40
    },
    {
        x: 450,
        y: 100,
        speedY: 7,
        w: 40,
        h: 40
    }
];
Ver ejemplo resuelto

Ejercicio

Utilizando el siguiente código, dibujar un jugador en escena, de tal forma que cuando mantengamos pulsado el ratón sobre el canvas, el jugador avance, y si dejamos de pulsar, el jugador se quede quieto

canvas.addEventListener('mousedown', function(){
  player.isMoving = true;
});
canvas.addEventListener('mouseup', function(){
  player.isMoving = false;
});

Ejercicio

Retocar el código anterior utilizando el siguiente código para que responda correctamente a los eventos del móvil

canvas.addEventListener('mousedown', movePlayer);
canvas.addEventListener('mouseup', stopPlayer);

canvas.addEventListener('touchstart', movePlayer);
canvas.addEventListener('touchend', stopPlayer);

Gestionando colisiones

Implementar el siguiente código para gestionar colisiones

var checkCollision = function(rect1, rect2){
	var closeOnWidth = Math.abs(rect1.x -rect2.x)<=Math.max(rect1.w, rect2.w);
	var closeOnHeight = Math.abs(rect1.y - rect2.y)<=Math.max(rect1.h, rect2.h);
	return closeOnHeight && closeOnWidth;
}
...

if(checkCollision(player, enemies[i])){
	gameLive = false;
	alert("Game Over");
}
Ver ejercicio resuelto

Ejercicio - llegar al tesoro

Añadir un nuevo objeto: el tesoto. Cuando el juagor colisiones contra él, habrá ganado la partida.

Ver ejercicio resuelto

Ejercicio - Añadimos el uso de sprites

Habrá que utilizar el siguiente código:

var sprites = {};
...
var load = function(){
  sprites.player = new Image();
  sprites.player.src = "images/hero.png";

  sprites.background = new Image();
  sprites.background.src = "images/floor.png";

  sprites.enemy = new Image();
  sprites.enemy.src = "images/enemy.png";

  sprites.tesoro = new Image();
  sprites.tesoro.src = "images/chest.png";

}
...
var draw = function(){
	ctx.clearRect(0,0,400,400);
	
    ctx.fillRect(player.x, player.y, player.w, player.h);
    ctx.fillRect(tesoro.x, tesoro.y, tesoro.w, tesoro.h);

    ctx.drawImage(sprites.background, 0, 0);
    ctx.drawImage(sprites.player, player.x, player.y);

    enemies.forEach(function(element, index){
    	ctx.drawImage(sprites.enemy, element.x, element.y);
    });
    ctx.drawImage(sprites.tesoro, tesoro.x, tesoro.y);
}
...
load();
step();
Ver ejercicio resuelto

double buffer animation

Doble buffer
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?