Canvas

CanvasAPI que permite crear y representar grficos , imgenes y animacin de forma dinmica por medio de cdigo JavaScript. Contexto de dibujo en 2D

Contexto de dibujo en 3D (WebGL)

Mapa de BitsSe trata de imgenes que se forman a partir de los pixeles , donde cada pixel contiene la informacin de su color en formato RGBA. De acuerdo a la cantidad de pixeles se determina la resolucin de la imagen.

Imagen en Mapa de Bits

Contexto de dibujo en 2DContexto ms establecido y disponible en todos los navegadores modernos. El contexto del canvas proporciona una gran API muy simple pero potente. Podemos ejecutar dibujo en una superficie de mapa de bits en 2D.

Contexto de dibujo en 3DSe puede dibujar objetos 3D , texturas e incluso incorporar animaciones. Este contexto funciona mediante la aceleracin de hardware.

HistoriaFue originalmente introducido por Apple para crear DashBoard Widgets . Ha sido adoptado por la WHATWG que actualmente esta escribiendo su especificacin.

Pasos para dibujar en Canvas1.- Acceder al objeto de canvas. 2.-Obtener el Contexto del objeto canvas. 3.-Se puede hacer modificaciones al Contexto. 4.-Es recomendable Guardar el avance. 5.-Transladar para poder dibujar otra vez. 6.-Restaurar el dibujo hecho.

Como definimos Canvas Tu Navegador no soporta Canvas. Es necesario definir en el canvas los atributos de width [Ancho] y height [Alto]. Todo en pixeles.

Obteniendo el contextovar Canvas = document.getElementById("Canvas");

var Contexto = Canvas.getContexto("2d");Regresa un objeto que contiene el API para dibujar en el Canvas.

Canvas.getContexto("2d");Canvas.getContexto(webgl");

Guardar Canvas como Imagenvar url = canvas . toDataURL( [ String type]); Guarda la imagen con una resolucin de 96dpi.

var url = canvas . toDataURLHD( [ String type] ); Guarda la resolucin nativa de dibujo del Canvas. Tipo"image/png" "image/jpeg" "image/svg+xml"

Ancho y Alto del Canvasvar Canvas . width; Regresa el ancho del canvas en pixeles. var Canvas . height; Regresa el alto del canvas en pixeles. var Contexto.canvas.width;

Empezar.var Canvas = document.getElementById("Canvas");

var Contexto = Canvas.getContexto("2d"); /*Contexto.canvas*/Contexto.save(); .... Contexto.restore();

Base CanvasContexto.save();Contexto.fillRect(0,0,7,7); Contexto.restore();

TransformacionesContexto.scale( float x, float y); Contexto.rotate(float angulo); Contexto.translate(float x, float y);

Estilos de LneaContexto . lineWidth [ = float value ];[1]

Contexto . lineCap [ = String value ];["butt" - "round" - "square"]

Contexto . lineJoin [ = String value ];["round" - "bevel" - "miter"]

Estilos de LneaContexto . lineCap [ = String value ]; "butt" "round" "square" Contexto . lineJoin [ = String value ]; "miter" "round" "bevel"

Estilo de TextoContexto . font [ = String value ];[10px sans-serif]

Contexto . textAlign [ = String value ];["start", "end", "left", "right", "center"]

Contexto . textBaseline [ = String value ];["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"]

TextosContexto . fillText (texto, x, y [, maxWidth ] ); Contexto . strokeText (texto, x, y [, maxWidth ] ); var metrics = Contexto . measureText(text) ; metrics . width; double

Stroke = borde. Fill = Relleno.

Trabajando con PathModelo de forma personalizada.

Contexto . beginPath(); . Contexto . closePath();

Define un nuevo trazo de dibujo Cierra el nuevo trazo.

Path Contexto . beginPath(); Contexto . moveTo( float x, float y); Contexto . lineTo( float x, float y); Contexto . rect(float x, float y, float w, float h); Contexto . fill(); Contexto . stroke();

Contexto . closePath();

PathContexto . quadraticCurveTo(cpx, cpy, x, y); Contexto . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x,y);

Contexto . arcTo(x1, y1, x2, y2, radio);Contexto . arc(x, y, radio, startAngle, endAngle [, anticlockwise ] ); Float Boolean

Curvas CuadrticasContexto . quadraticCurveTo(float cpx, float cpy, float x, float y);

cp = Control Point

Curva de BezierContexto . bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y, float x, floaty);

cp = Control Point

Cuadrticas VS BezierCuadrticas 4 Parmetros

Bezier 6 Parmetros

ArcoContexto . arc(x, y, radio, startAngle, endAngle [, anticlockwise ] );

EstilosContexto . fillStyle [ = Algo value ] ;[Color : Negro]

Contexto . strokeStyle [ = Algo value ];[Color : Negro]

Gradientesvar gra = Contexto . createLinearGradient(double startX , double startY, double endX, double endY); var gra = Contexto . createRadialGradient(double startX, double startY, double startRad, double endX, double endY, double endRad); var fondo = Contexto . createPattern(Imagen image, String repeticin)[repeat - repeatX - repeatY no-repeat]

Aplicacin Gradientesvar gra = Contexto . createLinearGradient(400 , 200,300,150); gra . addColorStop(float offset, String color); gra . addColorStop(0,"white"); gra . addColorStop(1,"red"); Contexto . fillStyle = gra; var fondo = context.createPattern(Foto, "repeat"); Contexto . fillStyle = fondo; Contexto . fill();

RectngulosContexto . clearRect(float x, float y, float w, float h); Contexto . fillRect(float x, float y, float w, float h); Contexto . strokeRect(float x,float y,float w,float h);

SombrasContexto . shadowColor [ = String value ];[0]

Contexto . shadowOffsetX [ = float value ];[0]

Contexto . shadowOffsetY [ = float value ];[0]

Contexto . shadowBlur [ = float value ];[Negro Transparente]

Todo es en pixeles

ImgenesContexto . drawImage(image,float dx,float dy);Contexto . drawImage(image ,float dx,float dy, float dw, float dh);

context.drawImage(image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh);Se puede meter solo una parte de la imagen

Posicionamiento y recorte de la Imagen

Distribucin de la Imagen

Manipulacin de pixelesCreando imgenes

var imagen = Contexto . createImageData(double sw, double sh);var imagen = Contexto . createImageData(Imagedata imagedata); var imagen = Conteto . createImageDataHD(double sw, double sh);

Manipulacin de pixelesObteniendo imgenes var imagen = Contexto . getImageData(double sx, double sy, double sw, double sh); var imagen = Contexto . getImageDataHD(double sx, double sy, double sw, double sh);

Manipulacin de pixelesImprimiendo Imgenes

Contexto . putImageData(imagedata Imagen, double dx, double dy); Contexto . putImageDataHD(imagedata Imagen, double dx, double dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]);

Manipulacin de pixelesObjeto Imagenvar imagen = Contexto . getImageData(double sx, double sy, double sw, double sh);Imagen . width; [float] Imagen . height; [float] Imagen . data; [Array][Vector de 4 elementos con los colores en formato rgba (0-255) ];

Data de los Pixelesvar vector = Imagen . data; Pixeles en X = 8 Pixeles en Y = 8 Total de pixeles = 8*8 =64

vector . length = 256 1 20 142 1 154 2 48 3 145 4 182 5 184 6 72 7 185

Array con colores RGBA 64*4 = 256 elementos

38 41 9 110 10 15 11 187 12 64

.13 174

.

Ordenamiento de los Pixeles

ComposicinContexto . globalAlpha [ = float value ]Color Alpha en todos los estilos aplicados en el contexto

Contexto . globalCompositeOperation [ = String value ]

GraciasJhorman Tasayco

@jhormantasaycoLima Per