CANVAS

CANVAS
CANVAS es una poderosa herramienta de
HTML5 que nos permite dibujar en un
área determinada de la página web,
mediante scripts y permite también
generar interacción con el usuario
mediante una API.
CANVAS fue introducido por Apple en
WebKit Mac OSX, en 2004 y fue adaptado
por otros navegadores como Firefox. El
grupo de trabajo del W3C decidió
incorporar el elemento CANVAS en el
estándar de HTML5, impulsando la
estandarización de una API que permite
dibujar un área del sitio de la página y, a
su vez, permitir interacción. Esto
posibilita el desarrollo de aplicaciones y
juegos que antes requerían el uso de
otras tecnologías.
CANVAS
Canvas se incorpora en el documento HTML mediante
la etiqueta <canvas>, es obligatorio definir su ancho
y alto con los atributos width y height. Tambíén es
recomendable indicar la id para poder seleccionar
elementos que luego trabajaremos desde su API con
JavaScript.
<canvas id=“juego” width=“640” height=“320”>
Mensaje para navegadores no compatibles
</canvas>
Desde el script debemos inicializar el Canvas de la
siguiente manera:
var canvas=document.getElementById(‘juego’);
If(canvas.getContext){
Var ctx=canvas.getContext(‘2d’);
//código para el canvas
}else{
//código para navegadores no compatibles
}
MÉTODOS DE CANVAS

MÉTODO DESCRIPCIÓN
beginPath( ) Comienza un path.
moveTo( ) Mueve el puntero de dibujo hasta un punto indicado
(recibe coordenadas de x e y), pero no dibuja el trazo.
lineTo( ) Agrega un punto a línea en el trazo para permitir
dibujar el path entre los puntos especificados (recibe
coordenadas x e y)
closePath( ) Crea una línea entre el punto actual y el comienzo del
path, para poder cerrarlo.
stroke( ) Dibuja el path definido.
arc( ) Permite crear arcos y sirve también para definir
formas circulares. Recibe coordenadas de x, y, radio,
angulo inicial.
MÉTODOS DE CANVAS

MÉTODO DESCRIPCIÓN
arcTo( ) Se puede emplear para crear un arco o una curva
entre dos tangentes. Para describirlo, recibe dos
coordenadas de x, y; la quinta representa el radio:
arcTo(x1,y1,x2,y2,r)
bezierCurveTo( ) Permite definir una curva Bezier.
quadraticCurveTo( ) Permite definir una curva Bezier cuadrática.
fill( ) Llena la figura.
strokeRect( ) Dibuja el rectángulo sin relleno.
fillRect( ) Dibuja un rectángulo con relleno.
clearRect( ) Recibe como parámetros los valores de x, y, ancho
y alto, para limpiar (o borrar) los píxeles indicados
en un rectángulo dibujado.
MÉTODOS DE CANVAS

crateLinearGradient( ) Crea una línea gradiente lineal

createRadialGradient( ) Crea una línea gradiente radial.
addColorStop( ) Se utiliza para trabajar en conjunto con
métodos para crear gradientes. Permite indicar
los pasos que tendrá el gradiente.
cratePattern( ) Crea un pattern.
drawImage( ) Dibuja una imagen en el Canvas (también puede
trabajar con video).
createImageData( ) Crea un nuevo objeto ImageData.
putImageData( ) Se emplea para colocar la información de un
objeto ImageData en el contexto del Canvas.
PROPIEDADES DE CANVAS
PROPIEDAD DESCRIPCIÓN
fillStyle Color, gradient o relleno que llena una figura del Canvas.
strokeStyle Color, gradient o relleno para el trazo de la figura.
shadowColor Color de sombra.
shadowBlur Nivel de desenfoque de la sombra
shadowOffsetX Movimiento (offset) en el eje X de la sombra, por defecto, su
valor es 0.
shadowOffsetY Movimiento (offset) en el eje Y de la sombra, por defecto, su
valor es 0.
lineCap Estilo de la tapa o final de la línea. Puede recibir los valores
round, bevel o miter (valor por defecto).
lineJoin Estilo de la línea cuando se junta con otra. Puede recibir los
valores round, bevel o miter (valor por defecto).
linewidth Ancho de la línea.
miterLimit Longitud del ángulo máximo. Por defecto su valor es 10.
 MÉTODOS PARA TRANSFORMACIONES

MÉTODOS PARA TRANSFORMACIONES

scale( )
rotate( )
translate( )
transform( )
setTransform( )
BIBLIOGRAFÍA
Damián, D. L. (2016). Apps HTML para móviles Desarrollo de aplicaciones para
smartphones y tablets basado en tecnologías web. Buenos Aires, Argentina.: Alfaomega
Grupo Editor Argentino, 2016.
¡MUCHAS GRACIAS POR TU VALIOSA
ATENCIÓN!