Download - Canvas HTML5
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