INTRODUCCIÓN a el Desarrollo de juegos
con el HTML5 Canvas API
@Johnp_js
ABOUT ME
Im a freelance Web Developer/ Designer
Im from Lima, Peru
Javascript is my favorite language!!
@johnp_js
My channel: https://www.youtube.com/user/TecTimeJohnProg
Indice
¿Qué es?
LET'S GET STARTED
Lineas y Polígonos
Curvas y círculos
Imágenes
Animaciones
Ejemplos
Herramientas
¿ QUÉ es canvas?
canvas
3D
Let's Get Started
SOPORTE DE LOS NAVEGADORES
EL ELEMENTO Canvas
<canvas></canvas> <canvas width="500" height="500"></canvas> <canvas width="500" height="500">Your browser does not support the HTML5 Canvas API</canvas>http://jsbin.com/AwelacO/1/edit<canvas id="canvas" width="500" height="500"></canvas><script>var canvas = document.getElementById('canvas'),ctx = canvas.getContext('2d');</script>
LineAS Y POLIGONOS
LineAS
beginPath()
moveTo(x, y)
lineTo(x, y)
fill()
stroke()
POLÍGONOS
fillRect(x, y, w, h)
strokeRect(x, y, w, h)
clearRect(x, y, w, h)
rect(x,y,w,h)
cÍrcULOS
ArcOS
arc(x, y, radius, startAngle, endAngle, counterclockwise)
arcTo(x1, y1, x2, y2, radius)
ImÁgeNES
dIBUJAR
drawImage()
3 arguments
drawImage(source, x, y)
5 arguments
drawImage(source, x, y, w, h)
9 arguments
drawImage(source, sourceX, sourceY,
sourceW, sourceH, x, y, w, h)
copIAR
-
from the same canvas
-
from a different canvas
-
from a <video> tag
AnimaCIONES
AnimaCIONES
setTimeout()
requestAnimationFrame()
EJEMPLO:
Parallax Background Animation
(Example only optimised for Chrome)Frameworks
http://paperjs.org/
http://canvasxpress.org/
http://jcscript.com/
http://kineticjs.com/
http://fabricjs.com/
HERRAMIENTAS
https://www.scirra.com/
EJEMPLOS
http://hexgl.bkcore.com/play/
http://dragonbound.net/
3d
http://threejs.org/
thanks
