Canvas.docx

Canvas GeneralMétodo JavaScript Descripción Defecto

width canvas.width Determina (sets) o devuelve (returns) la anchura del canvas 300

height canvas.height Determina (sets) o devuelve (returns) la altura del canvas 150

getContext()canvas.getContext("2d");

Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas.

toDataURL()

canvas.toDataURL(tipo);

Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen image/png

Colores, estilos, y sombrasMétodo JavaScript Descripción Defecto

fillStylecontext.fillStyle = color | gradiente | patrón;

Determina o devuelve el color, gradiente o patrón del relleno. negro

strokeStylecontext.strokeStyle = color | gradiente | patrón;

Determina o devuelve el color, gradiente o patrón de la línea.

negro

lineWidth context.lineWidth=numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1

shadowColor context.shadowColor=color; Determina (sets) o devuelve (returns) el color utilizado para las sombras.

#000000;transparente

shadowBlur context.shadowBlur=number; Determina (sets) o devuelve (returns) el nivel de desenfoque de las sombras. 0

Método JavaScript Descripción Defecto

shadowOffsetX context.shadowOffsetX=number;Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto.

0

shadowOffsetY context.shadowOffsetY=number;Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto.

0


createLinearGradient()

context.createLinearGradient(x0,y0,x1,y1);

Crea un gradiente lineal para utilizar en el <canvas>x0,y0 son las coordenadas del punto donde empieza el gradiente.x1,y1 son las coordenadas del punto donde acaba el gradiente.

createPattern()context.createPattern(img,"repeat | repeat-x | repeat-y | no-repeat");

Repite una imagen en la dirección especificada.

createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Crea un gradiente radial para utilizar en el <canvas>x e y son las coordenadas del centro de los circulosr es el radio de los circulos.

addColorStop() gradient.addColorStop(stop,color);Especifica los colores y la posición donde para el gradiente.

Líneas

Propiedad JavaScript Descripción Defecto


lineCapcontext.lineCap="butt|round|square";

Determina (sets) o devuelve (returns) el aspecto de las puntas de una línea. butt

lineJoincontext.lineJoin="bevel|round|miter";

Determina (sets) o devuelve (returns) el aspecto de las juntas entre líneas. Posibles valores: bevel (biselado), round (redondeado), miter (en angulo)

mitter

miterLimit context.miterLimit=numero;Determina (sets) o devuelve (retursn) el aspecto de las juntas en miter. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo).

10

RectángulosMétodo JavaScript Descripción Defecto

rect() context.rect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

fillRect()context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y).

strokeRect()

context.strokeRect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

clearRect();context.clearRect(x,y,width,height);

Borra los píxeles especificados dentro de un rectángulo dado.

TrazadosMétodo JavaScript Descripción Defecto

fill() context.fill(); Rellena una forma geométrica. black


stroke() context.stroke(); Dibuja una línea ya definida.

beginPath() context.beginPath(); Inicia un nuevo trazado

moveTo() context.moveTo(x,y); Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.

x=0;y=0;

closePath() context.closePath(); Cierra una línea poligonal o una línea curva

lineTo() context.lineTo(x,y);Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus coordenadas "x" e "y". Mueve el "lapiz" a este punto.

clip() context.clip()

Recorta una región con la forma y tamaño del trazado dibujado previamente en el canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de recorte ( clipping region).

quadraticCurveTo()context.quadraticCurveTo( cx,cy,x,y) ;

Define una curva cuadráticas de Bézier.cx,cy = coordenadas punto de anclaje (control point)x,y = coordenadas punto final (el punto de partida siendo determinado previamente).

bezierCurveTo()context.bezierCurveTo( cx1,cy1,cx2,cy2,x,y );

Define una curva de Bézier.cx1,cy1,cx2,cy2= coordenadas puntos de anclaje (control points)x,y = coordenadas punto final (el punto de partida siendo determinado previamente).

arc() context.arc( x, y, r, sA, eA, aC )

Define un segmento circular.x y = coordenadas centror = radiosA = ángulo de partida en radianeseA = ángulo final en radianesaC = sentido contra reloj (anti-Clockwise) true/false


360° = 2Π radianes.radianes = (Math.Pi / 180) * grados;

arcTo()context.arcTo( x1,y1,x2,y2,r ); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2

isPointInPath() context.isPointInPath(x,y); Detecta si un punto cuyas coordenadas son x e y se encuentra en un trazado dado

TransformationsMétodo JavaScript Descripción Defecto

scale() context.scale(h,v);

Reduce o amplía a escala el dibujo actual.h = horizontal; v = verticalValores que pueden tomar los parametros del método: 1=100%, 0.5=50%, 2=200%, etc...

1

rotate() context.rotate(ángulo);Gira los trazados posteriores un ángulo dado (en radianes). El punto alrededor del cual gira coincide con el origen del canvas (0,0)

translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado (x,y).

transform()context.transform(a,b,c,d,e,f); Cambia los trazados posteriores, cambiando la matriz de estos.

setTransform()context.setTransform(a,b,c,d,e,f);

Reinicia el canvas a los valores iniciales, antes de proceder a cambiar los trazados posteriores.

Text

Propiedad JavaScript Descripción Defecto

font

context.font = "font-style font-variant font-weight font-size font-family";context.font = "italic small-caps bold 12px arial";

10px sans-serif

textAligncontext.textAlign="center | end | left | right | start"; start

textBaselinecontext.textBaseline ="alphabetic | top | hanging | middle | ideographic | bottom";

Determina (sets) o devuelve (returns) la alineación vertical del texto. alphabetic


fillText()context.fillText(text,x,y,maxWidth);

Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional. No se admite en Safari.

#000;

strokeText()context.strokeText(text,x,y,maxWidth);

Dibuja texto bordeado con un color, gradiente o patrón previamente definido.maxWidth es opcional.

black

measureText() context.measureText(text).width; Devuelve un objeto que contiene la anchura del texto especificado entre paréntesis.

Image DrawingMétodo JavaScript Descripción Defecto

drawImage() context.drawImage(img,x,y); Dibuja una imagen en el canvas desde el punto(x,y)

drawImage() context.drawImage(img,x,y,w,h);Dibuja una imagen en el canvas desde el punto(x,y), donde w y h son el ancho y el alto de la imagen, respectivamente.


drawImage()context.drawImage(img,sx,sy,sw,sh,x,y,w,h);

Recorta la imagen empezando desde un punto (sx, sx), sw y sh siendo el ancho y el alto de la zona recortada.Dibuja esta imagen en el canvas desde el punto(x, y), w y h siendo el ancho y el alto de la imagen resultante.

Pixel ManipulationPropiedad JavaScript Descripción Defecto

width imgData.width Devuelve el ancho del objeto ImageData, en píxeles

height imgData.height Devuelve la altura del objeto ImageData, en píxeles

data imageData.data Devuelve un objeto conteniendo todos los datos del objeto ImageData.


createImageData() context.createImageData( ancho, alto );Crea un nuevo objeto ImageData en blanco. Toma dos argumentos: la anchura y la altura del objeto creado

createImageData() context.createImageData(imgData);Crea un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por el argumanto imgData.

getImageData() context.getImageData ( x, y, ancho, alto );Devuelve un objeto ImageData que copia los datos de los píxeles del rectángulo especificado.

putImageData()context.putImageData( imgData, x, y,[dirtyX, dirtyY, dirtyWidth, dirtyHeight] );

Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en el canvas

CompositingPropiedad JavaScript Descripción Defecto

globalAlphacontext.globalAlpha = numero

Determina (sets) o devuelve (returns) el valor alfa o la transparencia actual del dibujo. 1.0

globalCompositeOperation

context. globalCompositeOperation = "source-in"

Define la apariencia de nuevos trazados, y como estos afectan o están afectados por los trazados ya existentes en el <canvas>.posibles valores: source-over, source-in, source-out, source-atop, destination-over, destination-atop, destination-in, destination-out, lighter, darker, copy, xor

source-over

OtherMétodo JavaScript Descripción Defecto

save() context.save(); Guarda el estado actual del canvas.

restore() context.restore() Recupera el estado previamente guardado del canvas.

getContext()canvas.getContext("2d");

Devuelve un objeto (context) que proporciona todos los métodos y propiedades para dibujar en el canvas.

toDataURL()

canvas.toDataURL() Convierte el contenido del canvas en una imagen data:uri. El parámetro entre paréntesis indica el tipo de imagen. "image/png"

Canvas - una introducción

La etiqueta <canvas> se utiliza para dibujar gráficos. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan <canvas>. El canvas cuenta con varias métodos() y propiedades. A continuación algunas de ellas.

JavaScript Descripción Defecto

width canvas.width Determina (sets) o devuelve (returns) la anchura del canvas 300

height canvas.height Determina (sets) o devuelve (returns) la altura del canvas 150

getContext()

canvas.getContext("2d");Devuelve un objeto que proporciona todos los métodos y propiedades para dibujar en el canvas.

toDataURL() canvas.toDataURL(tipo);Convierte el contenido del canvas en una imágen - data:uri. El parámetro entre paréntesis indica el tipo de imágen.

image/png

Llas propiedades y metodos() de canvas.

<canvas id= "Canvas1" width= "250" height= "220">Su navegador no soporta canvas :( </canvas>

Sin embargo, el elemento <canvas> no tiene habilidad de dibujo en sí mismo, siendo sólo un contenedor para gráficos. Por esto es importante que el <canvas> tenga asignado un id, ya que habrá que manipularlo a través deJavaScript. Utilizaremos document.getElementById para encontrar el canvas.

El método getContext() devuelve un objeto ( puede llamar este objeto como quiera; a continuación lo llamaremosctx ) que proporciona métodos() y propiedades para dibujar en el canvas.

window.onload = function() { // encuentre el canvas para dibujar. var canvas = document.getElementById("Canvas1"); // si existe el canvas y si tiene el método getContext if (canvas && canvas.getContext) { // utilice el método getContext para recuperar el contexto del canvas var ctx = canvas.getContext("2d");

// y si tenemos contexto if (ctx) { // dibujamos } }}Para dibujar necesitaremos utilizar las coordenadas x e y del canvas: arriba en la esquina izquerda x=0; y=0;; abajo en la esquina derecha x=canvas.width; y=canvas.height;.Pase el ratón sobre el siguiente <canvas> para ver sus coordenadas x e y:

Trazar una línea

Para dibujar lineas en el <canvas> necesitamos algunas de las propiedades y métodos predefinidos en el HTML5:


lineWidth context.lineWidth=numero;Determina (sets) o devuelve (returns) la grosor de la línea.

1

strokeStyle context.strokeStyle=color|gradient|pattern;Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea.

negro

beginPath()

context.beginPath(); Empezamos a dibujar

moveTo() context.moveTo(x,y);Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.

x=0;y=0;

lineTo() context.lineTo(x,y); Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus


coordenadas "x" e "y". Mueve el "lapiz" a este punto.


Vea las propiedades y metodos() de canvas.

Supongamos que queremos dibujar una línea de 3px de gruesa ( line width = ancho de la línea ). Escribimos: ctx.lineWidth = 3; Note por favor que escribimos 3 y no 3px. Si no especificamos lineWidth, el ancho de línea será de 1px.Queremos tambien que nuestra línea sea roja. ( stroke style = estilo de trazado ). Escribimos: ctx.strokeStyle = "#f00"; Si no especificamos strokeStyle, el el color del trazado será negro.Decidido todo esto empezamos a dibujar:ctx.beginPath();Nuestro lapiz tocará el canvas a x=20px, y=230px.ctx.moveTo(20, 230);Esbozamos una línea desde x=20px, y=130px ( el punto definido anteriormente ) a x=230px, y=20px.ctx.lineTo(230, 20);Finalmente trazamos nuestra linea. Note por favor que sin stroke() no habrá línea: ( ctx.stroke(); )

A continuación lo ponedremos todo junto:

<canvas id= "linea1" width= "250" height= "150">Su navegador no soporta canvas :( </canvas>window.onload = function() { var canvas = document.getElementById("linea1"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.lineWidth = 3; ctx.strokeStyle = "#f00"; ctx.beginPath(); ctx.moveTo(20, 130); ctx.lineTo(230, 20); ctx.stroke();

} }}Como dibujar líneas finas

Por defecto el <canvas> de HTML5 “suaviza” las líneas, y esto queda muy bien en las líneas oblicuas. Sin embargo las líneas horizontales y verticales parecen más gruesas de lo que son en realidad. Esto llega a ser muy evidente, incluso molesto, en líneas muy finas (ctx.lineWidth = 1), por ejemplo las coordenadas de un gráfico.La buena noticia es que podemos eludir este problema utilizando el método translate().

En el caso de las líneas horizontales aplicaremos ctx.translate(0, .5);Para las líneas verticales utilizaremos ctx.translate(.5, 0);

<canvas id= "linea2" width= "250" height= "75">Su navegador no soporta canvas :( </canvas>window.onload = function() { var canvas2 = document.getElementById("linea2"); if (canvas2 && canvas2.getContext) { var ctx = canvas2.getContext("2d"); if (ctx) { ctx.lineWidth = 1; ctx.strokeStyle = "#f00"; //dibuja la primera línea ctx.beginPath(); ctx.moveTo(20, 25); ctx.lineTo(230, 25); ctx.stroke(); // dibuja una segunda línea MÁS FINA; ctx.translate(0, .5);

http://w3.unpocodetodo.info/canvas/transformaciones.php#h4_1

Puntas de línea (lineCap)Para dibujar lineas en el <canvas>, además de los metodos que ya hemos visto, podemos utilizar la propiedadlineCap para dar formato a las puntas de línea. Los valores que puede tomar lineCap son "butt" (tope), "round"(redondeado) y "square" (cuadrado)



strokeStyle context.strokeStyle=color|gradient|pattern; Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. negro

beginPath() context.beginPath(); Empezamos a dibujar


x=0;y=0;


lineCap context.lineCap="butt|round|square"; Determina (sets) o devuelve (returns) el aspecto de las puntas de una línea. butt


Vea la chuleta con las propiedades y metodos() de canvas.Veamos un ejemplo. A continuación dibujaremos 3 líneas del mismo tamaño, cada una con otro tipo de punta. La línea de arriba tiene una punta de línea normal (ctx.lineCap = "butt";), la del medio tiene una punta de línea redondeada (ctx.lineCap = "round";), mientras que la de abajo tiene una punta de línea cuadrada (ctx.lineCap = "square";).

<canvas id= "juntas" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("juntas"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.lineWidth = 25;

http://w3.unpocodetodo.info/canvas/chuleta.php

ctx.strokeStyle = "#00f"; // la línea de arriba ctx.beginPath(); ctx.lineCap = "butt"; ctx.moveTo(25, 50); ctx.lineTo(225, 50); ctx.stroke(); // la línea del medio

Uniones de líneaPodemos dibujar un trazado en el <canvas> conectando lineas y curvas. Al conectar dos líneas podemos escoger también el tipo de unión.



strokeStyle context.strokeStyle=color | gradient | pattern;

Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. negro


moveTo() context.moveTo(x,y); Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.

x=0;y=0;


lineJoin context.lineJoin="bevel | round | miter";

Determina (sets) o devuelve (returns) el aspecto de las juntas entre líneas. Posibles valores: bevel (biselado), round (redondeado), miter (en angulo)

mitter

miterLimit context.miterLimit=numero;Determina (sets) o devuelve (return) el aspecto de las juntas en miter. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo).

10


Vea las propiedades y metodos() de canvas.Veamos un ejemplo. A continuación dibujaremos 3 trazados iguales, cada una con otro tipo de unión. El trazado de arriba tiene una unión en ángulo (ctx.lineJoin = "miter";), el del medio es redondeado ( ctx.lineJoin = "round";), mientras que el tercer trazado tiene una unión en bisel (ctx.lineJoin = "bevel";). Si no especificamos el tipo de unión, este es por defecto en ángulo ("miter").Hay tambien una propiedad miterLimit que representa la distancia entre la parte interna y la parte externa del ángulo donde las dos líneas se encuentran. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo). Utilizando miterLimit podemos tramsformar una punta en angulo "miter" en una punta biselada. ( Vea el último trazado - en rojo ).

<canvas id= "juntas1" width= "250" height= "500">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("juntas1"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.lineWidth = 25; ctx.strokeStyle = "#00f"; // unión en angulo ctx.beginPath(); ctx.lineJoin = "miter"; ctx.moveTo(50, 150); ctx.lineTo(125, 50); ctx.lineTo(200, 150); ctx.stroke(); // unión redondeada

Arcos y círculos

Para dibujar círculos o segmentos circulares, utilizaremos una serie de métodos() y propiedades de <canvas>.


lineWidth context.lineWidth = numero; Determina (sets) o devuelve (returns) la grosor de la línea. 1

strokeStyle context.strokeStyle = color | gradient | pattern;


fillStyle context.fillStyle = color | gradient | pattern;




arc() context.arc(x, y, r, ap, af , cR)

Define un segmento circular.x y = coordenadas centror = radioap = ángulo de partida en radianesaf = ángulo final en radianescR = opcional; sentido contra reloj: true | false

arcTo() context.arcTo(x1,y1,x2,y2,r); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2



Vea la chuleta con las propiedades y metodos() de canvas.Repaso de geometría

En el canvas para trabajar con ángulos, utilizaremosradianes. Un circulo completo tiene 2π radianes, con lo cual podemos escribir: 360° = 2π rad;o si hablamos JavaScript: 2*Math.PI;Para convertir grados sexagesimales a radianes utilizaremos la siguiente fórmula:radianes = (π / 180) * grados;


o en JavaScript escribiremos:var radianes = (Math.PI / 180) * grados;Dibujar un arco

Para dibujar un arco utilizaremos el método arc(x, y, r, ap, af, aC), donde x e y son las coordenadas del centro, ap es el ángulo de partida ( en radianes ), af es el ángulo final ( en radianes ), y cR ( contra reloj ) es la dirección. El parametro cR puede tomar dos valores: true ( verdadero, o sea: en sentido contrario al de las agujas del reloj ) y false ( falso, o sea: en el sentido de las agujas del reloj ).

<canvas id= "arco" width= "250" height= "150">Su navegador no soporta canvas :( </canvas> window.onload = function() { var elCanvas = document.getElementById("arco"); if (elCanvas && elCanvas.getContext) { var context = elCanvas.getContext("2d"); if (context) { var X = elCanvas.width/2; var Y = 100; var r = 50; var aPartida = (Math.PI / 180) * 220; var aFinal = (Math.PI / 180) * 320; context.strokeStyle = "orange"; context.lineWidth = 15; context.arc(X,Y,r,aPartida,aFinal,false); context.stroke(); } } }

Dibujar un círculoPara dibujar un círculo hay que trazar un arco de 360° ( 2π radianes ), o sea: el ángulo de partida ap = 0 y el ángulo final (en radianes) af = 2*Math.PI

<canvas id= "lienzo" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var lienzo = document.getElementById("lienzo"); if (lienzo && lienzo.getContext) {

var contexto = lienzo.getContext("2d"); if (contexto) { var X = lienzo.width/2; var Y = lienzo.height/2; var r = 75; contexto.strokeStyle = "#006400"; contexto.fillStyle = "#6ab150"; contexto.lineWidth = 5; contexto.arc(X,Y,r,0,2*Math.PI); contexto.fill(); contexto.stroke(); } } }

Más geometríaPara calcular las coordenadas de un punto en la circunferencia de un círculo utilizaremos las siguientes fórmulas:var x = centroX + r * Math.cos(a);var y = centroY + r * Math.sin(a);Donde centroX y centroY son las coordenadas del centro del círculo;r es el radio del círculo;y a es el ángulo entre el punto 0π y este punto.Dibujar un sector circularA continuación vamos a dibujar un sector circular de 60°, donde el ángulo de partida ap = 60° y el ángulo final af = 120°.Necesitamos definir algunas variables:El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este.var X = canvas.width/2;var Y = 30;var R = 140;El ángulo de partida ap y el ángulo final afvar ap = (Math.PI / 180) * 60;var af = (Math.PI / 180) * 120;Las coordenadas del punto de partida en la circunferenciavar Xap = X+R * Math.cos(ap);var Yap = Y+R * Math.sin(ap);También hay que definir el color de relleno fillStyle y el color del borde strokeStyle. Veamos el código.

<canvas id= "sectorCircular" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("sectorCircular");

if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // El centro del circulo (X,Y) cuyo sector vamos a dibujar, y el radio R de este. var X = canvas.width/2; var Y = 30; var R = 140; // El ángulo de partida ap y el ángulo final af var ap = (Math.PI / 180) * 60; var af = (Math.PI / 180) * 120; // Las coordenadas del punto de partida en la circunferencia var Xap = X+R * Math.cos(ap); var Yap = Y+R * Math.sin(ap); // estilos ctx.fillStyle = "#abcdef"; ctx.strokeStyle = "#1E90FF"; ctx.lineWidth = 5; // empezamos a dibujar ctx.beginPath(); ctx.moveTo(X,Y); ctx.lineTo(Xap,Yap); ctx.arc(X,Y,R,ap,af); ctx.closePath(); ctx.fill(); ctx.stroke(); } } }

El método arcTo

En el <canvas> podemos crear esquinas redondeadas utilizando el método arcTo(). La mala noticia es que Opera no soporta el método arcTo().







arcTo() context.arcTo(x1,y1,x2,y2,r); Crea un arco de círculo entre dos tangentes x1, y1 y x2, y2


Vea la chuleta con las propiedades y metodos() de canvas.

La propiedad arcTo()La propiedad arcTo() crea un arco entre dos tangentes. Los parámetros utilizados son:

x1, y1 Las coordenadas x e y del primer punto de control. x2, y2 Las coordenadas x e y del primer segundo de control. r Representa el radio de la curvatura.

La primera tangente va del punto (x0, y0) al punto (x1, y1).La segunda tangente va del punto (x1, y1) al punto (x2, y2).


Esquinas redondeadas con arcTo <canvas id= "arcos" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("arcos"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // define el rádio var r = 20; // las coordenadas del rectángulo; var x0 = 50, y0 = 50; var x1 = 200, y1 = 50; var x2 = 200, y2 = 150; var x3 = 50, y3 = 150; ctx.lineWidth = 8; ctx.strokeStyle = "orange"; ctx.beginPath(); ctx.moveTo(x3,y3-r); // dibuja un rectángulo con esquinas redondeadas ctx.arcTo(x0,y0,x1,y1,r); ctx.arcTo(x1,y1,x2,y2,r); ctx.arcTo(x2,y2,x3,y3,r); ctx.arcTo(x3,y3,x0,y0,r); ctx.stroke(); } } }

Curvas cúbicas de Bézier

Para dibujar una curva de Bézier en el <canvas> utilizaremos, además de otros métodos() y propiedades ya conocidas, un método especifico: bezierCurveTo()



strokeStyle context.strokeStyle = color | gradient | patrón;


fillStyle context.fillStyle = color | gradient | patrón; Determina o devuelve el color, gradiente o patrón del relleno. negro


bezierCurveTo() context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);

Define una curva de Bézier.cx1,cy1,cx2,cy2= coordenadas puntos de anclaje P1 y P2 (control points)x,y = coordenadas punto final P3 (el punto de partida siendo determinado previamente).





Repaso de GeometríaCuatro puntos del plano: P0, P1, P2 y P3 definen una curva cúbica de Bézier. La curva empieza en el punto P0, se dirige hacia P1 y llega a P3 viniendo de la dirección del punto P2. Usualmente, no pasará ni por P1 ni por P2. Estos puntos sólo están ahí para proporcionar información direccional.Lea más sobre las curvas de Bézier en WikipediaVeamos un ejemplo. A continuación dibujaremos una curva de Bézier en el <canvas>. Utilizaremos ctx.moveTo(x0,y0) para mover el "lapiz" en el punto P0. Para esbozar la curva utilizaremos ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3);, donde x1, y1 son las coordenadas del punto P1, etc...Para dar estilo a la curva utilizaremos como siempre las propiedades lineWidth y strokeStyle. Al final dibujaremos la curva con stroke().Visite cubic-bezier.com (Made by Lea Verou with care). Verá un maravilloso ejemplo de curvas de Bézier, realizado con<canvas>.

<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var x0 = 20; var y0 = 160; var x1 = 50; var y1 = 50; var x2 = 230; var y2 = 0; var x3 = 220; var y3 = 180; ctx.lineWidth = 5; ctx.strokeStyle = "#00f"; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.bezierCurveTo(x1,y1,x2,y2,x3,y3); ctx.stroke(); } } }

Calcular las coordenadas de un punto en la curvaPara calcular las coordenadas de un punto en la curva de Bézier utilizaremos una fórmula encontrada en Wikipedia

<canvas id= "lienzo1" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { var x0 = 20; var y0 = 160; var x1 = 50; var y1 = 50;

http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier#Curvas_c.C3.BAbicas_de_B.C3.A9zier

http://cubic-bezier.com/

http://es.wikipedia.org/wiki/Curva_de_Bezier

var x2 = 230; var y2 = 0; var x3 = 220; var y3 = 180; ctx1.lineWidth = 5; ctx1.strokeStyle = "#00f"; ctx1.beginPath(); ctx1.moveTo(x0,y0); ctx1.bezierCurveTo(x1,y1,x2,y2,x3,y3); ctx1.stroke(); //calculamos las coordenadas del punto var t = .7; // toma valores entre 0 - 1 var x = (1 - t) * (1 - t) *(1 - t) * x0 + 3 * (1 - t) * (1 - t) * t * x1 + 3 * (1 - t) * t * t * x2 + t * t * t * x3; var y = (1 - t) * (1 - t) *(1 - t) * y0 + 3 * (1 - t) * (1 - t) * t * y1 + 3 * (1 - t) * t * t * y2 + t * t * t * y3; // dibujamos un punto rojo ctx1.beginPath(); ctx1.fillStyle = "red"; ctx1.arc(x,y,10,0,2*Math.PI); ctx1.fill(); } } }

Curvas cuadráticas de Bézier

Para dibujar una curva de Bézier en el <canvas> utilizaremos, además de otros métodos() y propiedades ya conocidas, un método especifico: bezierCurveTo()



strokeStyle context.strokeStyle = color | gradient | patrón;


fillStyle context.fillStyle = color | gradient | patrón;



quadraticCurveTo() context.quadraticCurveTo(cx,cy,x,y);

Define una curva cuadráticas de Bézier.cx,cy = coordenadas punto de anclaje (control point)x,y = coordenadas punto final (el punto de partida siendo determinado previamente).




Repaso de GeometríaTres puntos del plano: a, pc y z definen una curva cuadrática de Bézier. La curva empieza en el punto a, se dirige hacia pc ( punto de control ) y llega a z viniendo de la dirección del punto de control. Usualmente, no pasará por pc. Este punto sólo proporciona información direccional.


Lea más sobre las curvas de Bézier en WikipediaVeamos un ejemplo. A continuación dibujaremos una curva cuadrátic de Bézier en el <canvas>. Utilizaremosctx.moveTo(ax,ay) para mover el "lapiz" en el punto a. Para esbozar la curva utilizaremos ctx.quadraticCurveTo( pcx,pcy,zx,zy ), donde pcx,pcy son las coordenadas del punto de control pc, y zx, zy son las coordenadas del punto final z. Para dar estilo a la curva utilizaremos como siempre las propiedades lineWidth y strokeStyle. Al final dibujaremos la curva con stroke().

<canvas id= "lienzo" width= "200" height= "190">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var ax = 20, ay = 130; var pcx = 40, pcy = 15; var zx = 180, zy = 170; ctx.strokeStyle = "blue"; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(ax,ay);// aquí empieza la curva ctx.quadraticCurveTo(pcx,pcy,zx,zy); ctx.stroke(); } } }

Calcular las coordenadas de un punto en la curvaPara calcular las coordenadas de un punto en la curva de Bézier utilizaremos una fórmula encontrada en Vikipedia

<canvas id= "lienzo1" width= "200" height= "190">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { var x0 = 20, y0 = 130; var x1 = 40, y1 = 15; var x2 = 180, y2 = 170; ctx1.strokeStyle = "blue"; ctx1.lineWidth = 5;

http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier#Curvas_cuadr.C3.A1ticas_de_B.C3.A9zier

http://es.wikipedia.org/wiki/Curva_de_Bezier

ctx1.beginPath(); ctx1.moveTo(x0,y0); ctx1.quadraticCurveTo(x1,y1,x2,y2); ctx1.stroke(); // calculamos las coordenadas del punto // con una fórmula encontrada en wikipedia var t = .7; // valor entre 0 - 1 x = (1 - t) * (1 - t) * x0 + 2 * (1 - t) * t * x1 + t * t * x2; y = (1 - t) * (1 - t) * y0 + 2 * (1 - t) * t * y1 + t * t * y2; ctx1.beginPath(); ctx1.fillStyle = "red"; ctx1.arc(x,y,10,0,2*Math.PI); ctx1.fill(); } } }

Dibujar un óvalo

Un óvalo, en geometría, es un círculo aplastado que se asemeja a una forma ovoide o elíptica. A diferencia de otras curvas, el término óvalo no está claramente definido, y muchas curvas diferentes son llamadas óvalos. Su forma no se aparta mucho de la de una circunferencia o una elipse.




arc() context.arc(x, y, r, sA, eA, aC)

Define un segmento circular.x y = coordenadas centror = radiosA = ángulo de partida en radianeseA = ángulo final en radianesaC = sentido contra reloj (anti-Clockwise) true | false




1

Vea la chuleta con las propiedades y metodos() de canvas.Más información acerca de los métodos save() y restore().Para dibujar un óvalo, dibujaremos un círculo, que aplastaremos luego, utilizando el método scale().Importante: para centrar el óvalo resultante hemos dibujado el circulo original hacia la izquierda.

<canvas id= "linea1" width= "250" height= "150">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("linea1"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { //calculamos el centro del canvas var centroX = ctx.canvas.width/2; var centroY = ctx.canvas.height/2; // guardamos el estado inicial ctx.save(); var radio = 50; // modificamos la escala horizontalmente ctx.scale(2, 1); // dibujamos un círculo que será aplastado en un óvalo ctx.beginPath(); ctx.arc( centroX / 2, centroY, radio, 0, 2 * Math.PI ); // restauramos el estado inicial, el de antes de modificar la escala // de esta manera el borde no será aplastado ctx.restore(); // trazamos el borde ctx.lineWidth = 15; ctx.strokeStyle = "#00f"; ctx.stroke(); } } }

http://w3.unpocodetodo.info/canvas/arc.php

http://w3.unpocodetodo.info/canvas/save-restore.php


Dibujar una elipse

En este momento no hay ningun método() de <canvas> que nos ayude dibujar elipses. Sin embargo el internet es una fuente ilimitada de recursos donde podemos encontrar de todo, incluso funciones que nos facilita dibujar elipses.





fillStyle context.fillStyle = color | gradient | pattern; Determina o devuelve el color, gradiente o patrón del relleno. negro


bezierCurveTo() context.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);

Define una curva de Bézier.cx1,cy1,cx2,cy2= coordenadas puntos de anclaje (control points)x,y = coordenadas punto final (el punto de partida siendo determinado previamente).





http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas#answer-2173084

Para una elipse dibujaremos cuatro curvas de Bézier, una para cada cuadrante. Para determinar el desplazamiento horizontal y vertical ( offset ) de los puntos de control, y por tanto la curvatura de la elipse, utilizaremos una constante llamada kappa.La función dibujarElipse(ctx, x, y, w, h), que escribimos, toma seis argumentos: ctx reprezenta el contexto del <canvas>, x e y representan las coordenadas del punto de origen, mientras que w y h representan la anchura ( w ) y respectivamente la altura ( h ) de nuestra elipse. El parámetro lw representa la grosor de la línea, definida con lineWidth.Las otras coordenadas las calcularemos en función de x, y, w y h.Consejo: Pruebe modificar el valor de kappa. Si kappa = 1 obtendremos un rectangulo con las esquinas ligeramente redondeadas. Si kappa = 0 el rezultado será un rombo.Para saber más acerca de kappa visite la página de Adam Stanislav Drawing a circle with Bézier Curve

<canvas id= "lienzo" width= "250" height= "170">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { dibujarElipse(ctx, 25, 25, 200, 120, 5); } } function dibujarElipse(ctx, x, y, w, h, lw) { var kappa=0.5522847498; var ox = (w / 2) * kappa; // desplasamiento horizontal (offset) var oy = (h / 2) * kappa; // desplazamiento vertical (offset) var xf = x + w; // x final var yf = y + h; // y final var xm = x + w / 2; // x medio var ym = y + h / 2; // y medio ctx.beginPath(); ctx.lineWidth = lw;

http://whizkidtech.redprince.net/bezier/circle/

http://w3.unpocodetodo.info/canvas/bezier.php

ctx.strokeStyle = "#00f"; ctx.moveTo( x, ym ); ctx.bezierCurveTo( x, ym - oy, xm - ox, y, xm, y ); ctx.bezierCurveTo( xm + ox, y, xf, ym - oy, xf, ym ); ctx.bezierCurveTo( xf, ym + oy, xm + ox, yf, xm, yf ); ctx.bezierCurveTo( xm - ox, yf, x, ym + oy, x, ym ); ctx.closePath(); ctx.stroke(); } }

Cerrar un trazado

Podemos dibujar formas geometricas en el <canvas> conectando varias líneas en un trazado. Para cerrar el trazado podemos dibujar una línea que une el el último punto con el origen de nuestro trazado, o podemos utilizar el método closePath() (cerrar trazado) y dejar el HTML5 que lo haga para nosotros.



strokeStyle context.strokeStyle=color|gradient|pattern; Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea. negro



x=0;y=0;


closePath() context.closePath(); Cierra una línea poligonal.



Vea la chuleta con las propiedades y metodos() de canvas.Veamos un ejemplo. A continuación dibujaremos un triángulo. Utilizaremos como siempre el método beginPath()para empezar el trazado. Utilizaremos el método moveTo() para mover el "lapiz" hasta el origen de nuestro trazado; esbozaremos dos de los tres lados utilizando el método lineTo(), y cerraremos el trazado utilizando el métodoclosePath(). Al final hay que utilizar stroke() para marcar el trazado.

<canvas id= "juntas" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("juntas"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.lineWidth = 3; ctx.strokeStyle = "#00f"; ctx.beginPath(); ctx.moveTo(25, 200); ctx.lineTo(125, 25); ctx.lineTo(225, 200); ctx.closePath(); ctx.stroke(); } } }

Rectángulos

Los rectángulos son por ahora las únicas formas geometricas primitivas soportadas por <canvas>. O sea: podemos dibujar rectángulos utilizando métodos y propiedades especificas.


rect() context.rect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).



fillStyle context.fillStyle = color | gradient | pattern; Determina o devuelve el color, gradiente o patrón del relleno. negro

fill() context.fill(); Rellena una forma geométrica. negro

fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y).



Determina o devuelve el color, gradiente o patrón de la línea. negro

strokeRect() context.strokeRect(x,y,anchura,altura); Dibuja un rectángulo desde un punto (x,y).

clearRect(); context.clearRect(x,y,width,height); Borra los píxeles especificados dentro de un rectángulo dado.

Vea la chuleta con las propiedades y metodos() de canvas.Dibujar un rectánguloVeamos un ejemplo. A continuación dibujaremos un rectángulo. Utilizaremos lineWidth y strokeStyle para establecer el estilo de línea. Utilizaremos fillStyle para establecer el tipo de relleno.Para esbozar el rectángulo utilizaremos el método rect(x,y,anchura,altura) y para el relleno el métodofillRect() . Observe por favor que intencionadamente hemos desplazado el relleno unos 10px hacia la derecha y abajo. ( También podemos utilizar el método fill() para rellenar el rectángulo, aunque esto no nos permite desplazar el relleno. )Los métodos rect(x,y,anchura,altura) y fillRect(x,y,anchura,altura) toman cuatro argumentos. Los primeros dos argumentos (x,y) representan las coordenadas de la esquina izquierda arriba del rectángulo ( o del relleno ). Los siguientes dos representan la anchura y la altura del mismo. Al final hay que utilizar stroke() para marcar el trazado. De esta manera el trazado estará por encima del relleno.

<canvas id= "lienzo" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.lineWidth = 2;


ctx.strokeStyle = "#00f"; ctx.rect(50, 50, 150, 100); ctx.fillStyle = "#ff0"; ctx.fillRect(60, 60, 150, 100); ctx.stroke(); } } }

Borrar con clearRect()Para limpiar el canvas podemos utilizar el método clearRect(). Exactamente como rect() o strokeRect(),clearRect() toma cuatro atributos: x, y, anchura y altura, pero en lugar de dibujar un rectángulo, está borrando del <canvas> los pixeles situados dentro. El método clearRect() es muy útil, especialmente en animaciones.En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el método clearRect() para borrar parte de este.

<canvas id= "lienzo1" width= "250" height= "232" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.fillStyle = "#ad0"; ctx1.fillRect(50, 40, 150, 120); ctx1.clearRect(70, 60, 110, 60); } } }

Dibujar un hexágono

Un hexágono regular es un polígono con 6 lados iguales y 6 ángulos iguales (120°).Para construir un hexágono trazaremos un circulo imaginario con el radio R y el centro en un punto (X,Y). En nuestro caso este punto coincide con el centro del <canvas>.A continuación tenemos que encontrar 6 puntos equidistantes situados en la circunferencia. Estos puntos están situados a 60° uno de otro. Si unimos estos puntos conseguimos un hexágono.Para calcular las coordenadas de un punto en la circunferencia de un círculo utilizaremos las siguientes fórmulas:var x = X + R * Math.cos(a);var y = Y + R * Math.sin(a);

http://es.wikipedia.org/wiki/Hex%C3%A1gono

Donde X e Y son las coordenadas del centro del círculo;R es el radio del círculo;Y a es el ángulo entre el punto 0π y este punto. No hay que olvidar que en el <canvas> tenemos que utilizar radianes. Sesenta grados en radianes son:var rad = (Math.PI / 180) * 60;Como que los 6 puntos son equidistantes podemos utilizar un bucle for ( for loop ) para trazar el hexágono.ctx.beginPath();for( var i = 0; i<6; i++ ){x = X + R * Math.cos(rad*i);y = Y + R * Math.sin(rad*i);ctx.lineTo(x, y);}ceramos el trazado y rellenamos:ctx.closePath();ctx.fill();

<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var R = 100; var X = canvas.width/2; var Y = canvas.height/2; ctx.fillStyle = "#6ab150"; // un angulo de 60 deg. var rad = ( Math.PI / 180 ) * 60; ctx.beginPath(); for( var i = 0; i<6; i++ ){ x = X + R * Math.cos( rad*i ); y = Y + R * Math.sin( rad*i ); ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); } }

}Polígonos regulares

Un polígono regular es un polígono en el que todos los lados tienen la misma longitud y todos los ángulos interiores tienen el mismo valor. Todos los polígonos regulares se pueden inscribir perfectamente en una circunferencia.Para dibujar un polígono regular, ( o cualquier otro trazado ) necesitamos definir algunas propiedades de <canvas>ctx.fillStyle = "#6ab150";ctx.strokeStyle = "black";ctx.lineWidth = 3;Todos los polígonos regulares se pueden inscribir en una circunferencia. Por lo tanto definiremos la posición del centro y el radio de este círculo:var X = canvas.width/2;var Y = canvas.height / 2;var R = 100;Y lo más importante: definiremos el número de lados L del polígono.var L = 5;Todos los ángulos centrales de un polígono regular son iguales entre si y su medida rad puede obtenerse a partir del número de lados L del polígono:var rad= 2*Math.PI / LPara dibujar el trazado utilizaremos un bucle for ( for loop ), donde con cada paso del bucle dibujaremos un lado del polígono.

<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas>window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.fillStyle = "#6ab150"; ctx.strokeStyle = "black"; ctx.lineWidth = 3; var X = canvas.width/2; var Y = canvas.height/2; var R = 100; // el número de lados del polígono var L = 5; // si L == 6 el ángulo es de 2π/6 o sea 60° var rad = (2*Math.PI)/L; // dibuja el trazado

ctx.beginPath(); for( var i = 0; i<L; i++ ){ x = X + R * Math.cos( rad*i ); y = Y + R * Math.sin( rad*i ); ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); ctx.stroke(); } }}

Arreglar desperfectosEl pentágono ha salido muy bien, pero no estaría nada mal poder girarlo alrededor de su centro. Para esto tendremos que utilizar dos otros métodos del <canvas>: translate() y rotate(). Como que trasladaremos el contexto en el centro del <canvas> tendremos que redefinir las variables X e Y.var X = 0;var Y = 0;Veamos como queda.

<canvas id= "lienzo1" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx = canvas1.getContext("2d"); if (ctx) { ctx.fillStyle = "#6ab150"; ctx.strokeStyle = "black"; ctx.lineWidth = 3; var X = 0; var Y = 0; var R = 100; var L = 5; // si L == 6 el ángulo es de 2π/6 o sea 60° var rad = (2*Math.PI)/L; // traslada el contexto en el centro del canvas // para poder girar el contexto alrededor del centro ctx.translate(canvas1.width/2, canvas1.height/2);



//gira el contexto unos 270º ctx.rotate(3*Math.PI/2); // dibuja el trazado ctx.beginPath(); for( var i = 0; i<L; i++ ){ x = X + R * Math.cos( rad*i ); y = Y + R * Math.sin( rad*i ); ctx.lineTo(x, y); } ctx.closePath(); ctx.fill(); ctx.stroke(); } } }

.

Dibujar estrellas

Las estrellas que dibujaremos a continuación son polígonos estrellados, y pueden trazarse "sin levantar el lápiz".Para dibujar una estrella, ( o cualquier otro trazado ) necesitamos definir algunas propiedades de <canvas>ctx.fillStyle = "#6ab150";ctx.strokeStyle = "black";ctx.lineWidth = 3;Las estrellas, como los demás polígonos regulares, se pueden inscribir en una circunferencia. Por lo tanto definiremos la posición del centro y el radio de este círculo:

var X = canvas.width/2;var Y = canvas.height / 2;var R = 100;Y lo más importante: definiremos el número de lados L de la estrella y el paso.var L = 5;var paso = 2Todos los ángulos son iguales entre si y su medida rad puede obtenerse a partir del número de lados L del polígono:var estrella = L / pasovar rad= 2*Math.PI / estrellaPara dibujar el trazado utilizaremos un bucle for ( for loop ), donde con cada paso del bucle dibujaremos un lado de la estrella.

<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.fillStyle = "#6ab150"; ctx.lineWidth = 6; var X = canvas.width / 2; var Y = canvas.height / 2; var R = 100; var L = 5; var paso = 2 var estrella= L / paso var rad = (2*Math.PI) / estrella; ctx.beginPath(); for( var i = 0; i<L; i++ ){ x = X + R * Math.cos( rad*i ); y = Y + R * Math.sin( rad*i ); ctx.lineTo(x, y); } ctx.closePath(); ctx.stroke(); ctx.fill(); }

} }

Arreglar desperfectosLa estrella ha salido muy bien, pero no estaría nada mal poder girarlo alrededor de su centro. Para esto tendremos que utilizar dos otros métodos del <canvas>: translate() y rotate(). Como que trasladaremos el contexto en el centro del <canvas> tendremos que redefinir las variables X e Y.var X = 0;var Y = 0;Veamos como queda.

<canvas id= "lienzo1" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx = canvas1.getContext("2d"); if (ctx) { ctx.fillStyle ="#6ab150"; ctx.lineWidth = 6; var X = 0; var Y = 0; var R = 100; var L = 5; var paso = 2; var estrella= L / paso; var rad = (2*Math.PI) / estrella; // traslada el contexto en el centro del canvas ctx.translate(canvas1.width / 2, canvas1.height / 2); //gira el contexto unos 270º ctx.rotate(3*Math.PI/2); // dibuja el trazado ctx.beginPath(); for( var i = 0; i<L; i++ ){ x = X + R * Math.cos( rad*i ); y = Y + R * Math.sin( rad*i ); ctx.lineTo(x, y); } ctx.closePath();



ctx.stroke(); ctx.fill(); } } }

Borrar con clearRect()Para limpiar el canvas podemos utilizar el método clearRect(). Exactamente como rect() o strokeRect(),clearRect() toma cuatro atributos: x, y, anchura y altura, pero en lugar de dibujar un rectángulo, está borrando del <canvas> los pixeles situados dentro. El método clearRect() es muy útil, especialmente en animaciones.En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el método clearRect() para borrar parte de este.

<canvas id= "lienzo1" width= "250" height= "232" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas>

window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.fillStyle = "#ad0"; ctx1.fillRect(50, 40, 150, 120); ctx1.clearRect(70, 60, 110, 60); } } }

Regiones de recorte (clipping region)

El <canvas> de HTML5 nos da la posibilidad de crear regiones de recorte ( clipping regions ). ( Hay un cierto parecido entre una región de recorte en el <canvas> y una máscara de Photoshop. )


clip() context.clip()Recorta una región con la forma y tamaño del trazado dibujado previamente en el canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de recorte ( clipping region ).

<canvas>



Vea la chuleta con las propiedades y metodos() de canvas.Inicialmente el entero <canvas> es por defecto una región de recorte. Para definir una nueva región, dibujaremos un trazado con la forma y el tamaño deseados. Después llamaremos el método clip() que transformará el trazado previamente dibujado en una nueva región de recorte, reemplazando de esta manera, la región de recorte anterior ( o sea: el <canvas> mismo ).Importante: el contexto de <canvas> no acepta más que una sola región de recorte.En el siguiente ejemplo esbozaremos un circulo con el radio de 100px y, llamaremos el método clip() para convertirlo en una nueva región de recorte.

<canvas width= "250" height= "240" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo");


if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.beginPath(); ctx.arc(125,120,100,0,2*Math.PI); ctx.clip(); var img=new Image(); img.src = "images/enfeinada250.jpg"; img.onload = function() { ctx.drawImage(this, 0, 20); } } } }

Todo parece funcionar muy bien, pero en Google Chrome el borde de nuestra imagen aparece pixelado y muy feo. Para arreglar este desperfecto, echaremos mano de otros dos métodos de <canvas>:save() ( guardar ) y restore() ( restaurar ).Arreglar desperfectos ( solución patosa )El método save() guardará el estado del contexto de <canvas>, el de antes de definir la nueva región de recorte. El método restore() restaurará este estado, per tal de poder dibujar de nuevo en el <canvas>, como lo habríamos hecho al principio. Después de restaurar el estado inicial del contexto podemos dibujar un borde ( blanco en este caso ) alrededor de nuestra imagen, que arreglará dicho desperfecto.

<canvas width= "250" height= "240" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.save(); ctx1.beginPath(); ctx1.arc(125,120,100,0,2*Math.PI); ctx1.clip(); var img=new Image(); img.src = "images/enfeinada250.jpg"; img.onload = function() { ctx1.drawImage(this, 0, 20); ctx1.restore(); ctx1.beginPath();



ctx1.strokeStyle = "white"; ctx1.lineWidth=2; ctx1.arc(125,120,100,0,2*Math.PI); ctx1.stroke(); } } } }

Y sí, funciona. Pero, esta no es más que una chapuza, y la verdad es que lo podemos hacer mucho mejor.Arreglar desperfectos ( con globalCompositeOperation )Esta vez en lugar de clip() utilizaremos la propiedad globalCompositeOperation. Para saber más acerca de globalCompositeOperation por favor lea el siguiente capitulo acerca de combinar trazados

<canvas width= "250" height= "240" id= "lienzo2">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas2 = document.getElementById("lienzo2"); if (canvas2 && canvas2.getContext) { var ctx2 = canvas2.getContext("2d"); if (ctx2) { ctx2.beginPath(); ctx2.arc(125,120,100,0,2*Math.PI); ctx2.fill() // ctx2.clip ( ); ctx2.globalCompositeOperation = "source-atop"; var img=new Image(); img.src = "images/enfeinada250.jpg"; img.onload = function() { ctx2.drawImage(this, 0, 20); } } } }

Combinar trazadosglobalCompositeOperation

http://w3.unpocodetodo.info/canvas/globalCompositeOperation.php


Para combinar trazados en el <canvas> podemos utilizar la propiedad globalCompositeOperation. Esta propiedad define la apariencia de nuevos trazados, y como estos afectan o están afectados por los trazados ya existentes en el <canvas>.La propiedad globalCompositeOperation puede tomar 12 valores diferentes.

Un poco de inglésPodemos traducir destination image ( la imagen azul de los ejemplos anteriores ) como imagen de destino y representa la imagen ya existente en el <canvas> cuando empezamos a dibujar el nuevo trazado. Por tanto cuando el valor de la propiedad globalCompositeOperation = "destination-over" quiere decir que la imagen de destino, o la imagen existente está encima ( over ) de la nueva imagen.Podemos traducir source image ( la imagen anaranjada de los ejemplos anteriores ) como imagen de origen oimagen fuente y representa la nueva imagen que dibujaremos en el <canvas>. Por tanto cuando el valor de la propiedad globalCompositeOperation = "source-over" quiere decir que la imagen de origen, o la nueva imagen está encima ( over ) de la imagen de destino.

Valor Descripcion

source-over Valor por defecto. La nueva imagen ( source ) aparece ENCIMA de la imagen existente ( destination ).

source-in La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ),

Valor Descripcion

mientras que la imagen existente vuelve transparente.

source-out La nueva imagen ( source ) aparece solo AL EXTERIOR de la imagen existente ( destination ), mientras que la imagen existente vuelve transparente.

source-atop La nueva imagen ( source ) aparece SOLO ENCIMA de la imagen existente ( destination ).

destination-over La imagen existente( destination ) aparece ENCIMA de la nueva imagen ( source ).

destination-atop La imagen existente( destination ) aparece SOLO ENCIMA de la nueva imagen ( source ).

destination-in La imagen existente ( destination ), aparece SOLO ENCIMA de la nueva imagen ( source )mientras que la nueva imagen ( source ) vuelve transparente.

destination-out

La imagen existente ( destination ), aparece solo AL EXTERIOR de la nueva imagen ( source ) mientras que la nueva imagen vuelve transparente.

lighter La intersección de las dos imágenes más clara.

darker La intersección de las dos imágenes más oscura.

copy Solo la nueva imagen ( source ) está visible, mientras que la imagen existente ( destination ), es ignorada.

Xor La nueva imagen ( source ) se combina con la imagen existente ( destination ) utilizando una disyunción exclusiva (exclusive or).

Vea la chuleta con las propiedades y metodos() de canvas.Un ejemplo fácil con "xor"A continuación superpondremos dos rectángulos que combinaremos con globalCompositeOperation = "xor".

<canvas width= "250" height= "130" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo1"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d");


if (ctx) { var x=80, y=15, w=75, h=75, color = "#0000ff"; var x1=95, y1=40, w1=75, h1=75, color1 = "#ff6400"; ctx.globalCompositeOperation = "xor"; ctx.fillStyle = color; ctx.fillRect(x,y,w,h); ctx.fillStyle = color1; ctx.fillRect(x1,y1,w1,h1); } } }

Otro ejemplo con "destination-out"En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS. Después de haber dibujado un rectángulo, utilizaremos el método globalCompositeOperation = "destination-out" para borrar parte de este.

<canvas width= "250" height= "232" id= "lienzo2" style= "background-image:url(images/enfeinada250.jpg)">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo2"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.beginPath(); ctx1.fillStyle = "#6a50b1"; ctx1.fillRect(50, 40, 150, 120); ctx1.globalCompositeOperation = "destination-out"; ctx1.fillRect(70, 60, 110, 60); } } }

Semilla de la vida con "xor"

La Semilla de la Vida es el nombre que se da a una figura geométrica compuesta de 6 círculos completes, todos del mismo diámetro, y para algunos tiene un significado místico y esotérico. Aquí nos interesa solo como dibujarla, ya que nos permite practicar con la propiedad globalCompositeOperation de <canvas>.Empezaremos esbozando un circulo imaginario con el centro en la esquina superior izquierda del <canvas> (var cX = 0, cY = 0) con un radio de 60px ( var r = 60;). No hay que trazarlo. Solo servirá de guía.

Trasladaremos el contexto en el centro del canvas: ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2);Para dibujar la "semilla de la vida" necesitaremos 6 círculos cuyos centros están dispuestos equidistantemente en la circunferencia del circulo guía, o sea formando un ángulo "a" de 60° entre ellos. Recordemos que en radianes 60° = Math.PI/3.Observamos que podemos escribir un bucle for para construir los 6 circulos.Para el centro del primer circulo el ángulo a = (Math.PI/3)*0 radianes.Para el centro del segundo circulo el ángulo a = (Math.PI/3)*1 radianes.Para el centro del tercer circulo el ángulo a = (Math.PI/3)*2 radianes.etc...Falta encontrar las coordenadas de los centros, y la fórmula ya la conocemos:X = cX+r*cos(a);Y = cY+r*sin(a);donde "a" es el ángulo calculado anteriormente.Al final dibujaremos los círculos utilizando el método arc(), y los combinaremos a cada uno con el circulo anterior utilizando ctx.globalCompositeOperation = "xor";Ahora podemos cerrar el bucle for.

<canvas width= "250" height= "260" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var cX = 0; var cY = 0; var r = 60; // definimos el estilo de relleno ctx.fillStyle = "blue"; // trasladamos el contexto en el centro del canvas ctx.translate(ctx.canvas.width/2,ctx.canvas.height/2); // girar 90° ctx.rotate( Math.PI/2 ); // utilizamos un bucle for para construir los 6 circulos for( var i=0; i < 6; i++ ){ var a = ( Math.PI/3 )*i var X = cX+r * Math.cos(a); var Y = cY+r * Math.sin(a); // dibujamos los circulos ctx.beginPath();

ctx.arc(X, Y, r, 0, 2 * Math.PI); ctx.fill(); //combinamos trazados con xor ctx.globalCompositeOperation = "xor"; } } } }

Dibujar un pajaritoo clip versus globalCompositeOperation

Vamos a practicar un poco lo que hemos aprendido hasta ahora, dibujando un pajarito regordete, que al inicio nos causará problemas en Google Chrome. Pero ¡no temáis! porque bien está lo que bien acaba.


clip() context.clip()

Recorta una región con la forma y tamaño del trazado dibujado previamente en el canvas. Cualquier cosa dibujada después, será visible solo dentro de la región de recorte ( clipping region ).

<canvas>

globalCompositeOperationcontext. globalCompositeOperation = "source-in"

Define la apariencia de nuevos trazados, y como estos afectan o están afectados por los trazados ya existentes en el <canvas>.posibles valores: source-over, source-in, source-out, source-atop, destination-over, destination-atop, destination-in, destination-out, lighter, darker, copy, xor

source-over

Vea la chuleta con las propiedades y metodos() de canvas.Dibujar pajarito con clip()Empezaremos dibujando la colita, el pico y las patas. Después esbozaremos un circulo con el radio de 70px y, llamaremos el método clip() para convertirlo en una nueva región de recorte ( clipping region ), que representará el cuerpo del pajarito. Dentro dibujaremos barriguita, ala, y todo lo demás.

<canvas width= "250" height= "240" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) {

http://canvas/chuleta.php

var ctx = canvas.getContext("2d"); if (ctx) { //colita ctx.beginPath() ctx.fillStyle = "#fcc"; ctx.moveTo(165, 175); ctx.lineTo(210, 168); ctx.lineTo(180, 140); ctx.fill(); // pico ctx.beginPath() ctx.fillStyle = "#f90"; ctx.moveTo(35, 95); ctx.lineTo(70, 85); ctx.lineTo(57, 110); ctx.fill(); //patas ctx.beginPath() ctx.fillStyle = "#cc9"; ctx.moveTo(125, 185); ctx.lineTo(125, 215); ctx.lineTo(140, 180); ctx.lineTo(140, 215); ctx.lineTo(155, 177); ctx.fill(); var cX = ctx.canvas.width/2; var cY = ctx.canvas.height/2; var r = 70; // recortamos!!! ctx.beginPath(); ctx.arc(cX,cY,r,0,2*Math.PI); ctx.clip(); // cuerpo ctx.beginPath(); ctx.fillStyle = "#ccc";

ctx.arc(cX,cY,r,0,2*Math.PI); ctx.fill(); // barriguita ctx.beginPath(); ctx.fillStyle = "#cc9"; ctx.arc(125,180,r,0,2*Math.PI); ctx.fill(); // ala ctx.beginPath(); ctx.fillStyle = "#fcc"; ctx.arc(180,105,r,0,2*Math.PI); ctx.fill(); // ojo ctx.beginPath(); ctx.fillStyle = "#000"; ctx.arc(90,90,4,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#eee"; ctx.arc(90,90,2,0,2*Math.PI); ctx.fill(); } } }

Todo parece funcionar muy bien, pero en Google Chrome el borde del cuerpo ( la región de recorte ) aparece pixelado y muy feo ( por culpa del Anti Aliasing ) y NO lo podemos arreglar con un borde, ya que de esta manera el borde aparecería entre el cuerpo y la colita y las demás cosas.Dibujar pajarito con "source-atop"Borramos las líneas de código que definen la región de recorte ( las lineas 34-37 del ejemplo anterior ), y enseguida después de dibujar el cuerpo del pajarito escribimos esta línea de código:ctx.globalCompositeOperation = "source-atop";Utilizando "source-atop" haremos que todos los trazados dibujados después ( source ) sean visibles solo encima del cuerpo del animal ( destination ).

<canvas width= "250" height= "240" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { //colita

http://youtu.be/hqi0114mwtY

ctx1.beginPath() ctx1.fillStyle = "#fcc"; ctx1.moveTo(165, 175); ctx1.lineTo(210, 168); ctx1.lineTo(180, 140); ctx1.fill(); // pico ctx1.beginPath() ctx1.fillStyle = "#f90"; ctx1.moveTo(35, 95); ctx1.lineTo(70, 85); ctx1.lineTo(57, 110); ctx1.fill(); //patas ctx1.beginPath() ctx1.fillStyle = "#cc9"; ctx1.moveTo(125, 185); ctx1.lineTo(125, 215); ctx1.lineTo(140, 180); ctx1.lineTo(140, 215); ctx1.lineTo(155, 177); ctx1.fill(); var cX = ctx1.canvas.width/2; var cY = ctx1.canvas.height/2; var r = 70; // cuerpo ctx1.beginPath(); ctx1.fillStyle = "#ccc"; ctx1.arc(cX,cY,r,0,2*Math.PI); ctx1.fill(); //globalCompositeOperation en lugar de clip ctx1.globalCompositeOperation = "source-atop"; // barriguita

ctx1.beginPath(); ctx1.fillStyle = "#cc9"; ctx1.arc(125,180,r,0,2*Math.PI); ctx1.fill(); // ala ctx1.beginPath(); ctx1.fillStyle = "#fcc"; ctx1.arc(180,105,r,0,2*Math.PI); ctx1.fill(); // ojo ctx1.beginPath(); ctx1.fillStyle = "#000"; ctx1.arc(90,90,4,0,2*Math.PI); ctx1.fill(); ctx1.beginPath(); ctx1.fillStyle = "#eee"; ctx1.arc(90,90,2,0,2*Math.PI); ctx1.fill(); } } }

Color de relleno

Podemos rellenar las formas geometricas dibujadas en el <canvas> utilizando el método fill(). Para los rectángulos podemos utilizar el método fillRect() y para el texto utilizaremos el método fillText(). Previamente tenemos que especificar el estilo de relleno fillStyle, ya sea color, gradiente o patrón. Si no especificamos un estilo de relleno, este será por defecto negro.


fillStyle context.fillStyle=color|gradient|pattern; Determina o devuelve el color, gradiente o patrón del relleno. #000;

fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y). #000;

fillText() context.fillText(text,x,y,maxWidth);Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional. No se admite en Safari.

#000;


fill() context.fill(); Rellena una forma geométrica. #000;

Vea la chuleta con las propiedades y metodos() de canvas.Veamos un ejemplo. A continuación dibujaremos un triángulo. Utilizaremos como siempre el método beginPath()para empezar el trazado. Utilizaremos el método moveTo() para mover el "lapiz" hasta el origen de nuestro trazado; esbozaremos dos de los tres lados utilizando el método lineTo(). No es necesario cerrar el trazado. Tampoco es necesario trazarlo.Utilizaremos fillStyle para definir el relleno ( amarillo en este caso ), y utlilizaremos el método fill() para rellenar de color el triángulo.Para rellenar de color un rectángulo es mucho más fácil. Sencillamente definimos el relleno con fillStyle y después utilizaremos el método fillRect(x,y,anchura,altura) para rellenar el rectángulo.Para texto utilizaremos el método fillText(text,x,y). El parámetro maxWidth no se admite en Safari.

<canvas id= "lienzo" width= "250" height= "160">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // dibujamos y rellenamos un trazado ctx.fillStyle = "#ff0"; ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(120, 20); ctx.lineTo(70, 100); ctx.fill(); // dibujamos y rellenamos un rectángulo ctx.fillStyle = "#b00"; ctx.fillRect(100,75,110,60); // rellenamos texto ctx.fillStyle = "#0b0"; ctx.font="25pt Georgia"; ctx.fillText("\241Hola Mundo!",20,120); } } }

Gradiente lineal


El gradiente lineal se puede utilizar como relleno para formas geométricas, líneas y texto dentro del <canvas>.


createLinearGradient() context.createLinearGradient(x0,y0,x1,y1);

Crea un gradiente lineal para utilizar en el<canvas>x0,y0 son las coordenadas del punto donde empieza el gradiente.x1,y1 son las coordenadas del punto donde acaba el gradiente.

addColorStop() gradient.addColorStop(stop,color); Especifica los colores y la posición donde para el gradiente.

fillStyle context.fillStyle = color | gradiente | patrón;



Vea la chuleta con las propiedades y metodos() de canvas.Los gradientes lineales son definidos por una línea imaginaria que nos da la dirección del gradiente.El método createLinearGradient(x0,y0,x1,y1) toma cuatro argumentos.Los primeros dos argumentos (x0,y0) representan las coordenadas del origen de nuestra línea, mientras que los siguientes dos argumentos (x1,y1) representan las coordenadas del punto donde esta línea acaba.El método addColorStop(stop,color) toma dos argumentos.El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con método createLinearGradient(). Podemos utilizar el métodoaddColorStop() tantas veces como creamos necesario.El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS ( nombres de colores, valores hex, rgb, rgba, hsl, hsla).Veamos un ejemplo. A continuación dibujaremos un rectángulo que cubrirá todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x = canvas.width, y = canvas.height ). Utilizando el método createLinearGradient() crearemos el vector gradiente, estableciendo el punto de partida del vector ( x0 = 0, y0 = 0 ), y el punto donde este acaba ( x1 = canvas.width, y1 = 0 ). Este es un gradiente linealhorizontal, ya que el vector es paralelo al eje x.Utilizaremos el método addColorStop() seis veces para crear algo parecido a un arco iris.Al final utilizaremos este gradiente como estilo de relleno (ctx.fillStyle = grd;) para ( ctx.fill() ) nuestro rectángulo.

<canvas id= "lienzo" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d");

http://w3.unpocodetodo.info/css3/hsl.php

http://w3.unpocodetodo.info/css3/rgb.php

http://w3.unpocodetodo.info/css3/hex.php

http://w3.unpocodetodo.info/utiles/colores-alfabeticamente.php


if (ctx) { ctx.rect(0, 0, canvas.width, canvas.height); // crea un gradiente lineal horizontal var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); grd.addColorStop(0,"black"); grd.addColorStop("0.2","magenta"); grd.addColorStop("0.4","blue"); grd.addColorStop("0.6","green"); grd.addColorStop("0.8","yellow"); grd.addColorStop(1,"red"); ctx.fillStyle = grd; ctx.fill(); } } }

Gradiente radial

El gradiente radial ( o circular ) se puede utilizar como relleno para formas geométricas, líneas y texto dentro del<canvas>.


createRadialGradient() context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Crea un gradiente radial para utilizar en el <canvas>x e y son las coordenadas del centro de los circulosr es el radio de los circulos.

addColorStop() gradient.addColorStop(stop,color); Especifica los colores y la posición donde para el gradiente.

fillStyle context.fillStyle = color | gradiente | patrón; Determina o devuelve el color, gradiente o patrón del relleno. negro




Para definir los gradientes radiales con el método createRadialGradient() utilizaremos dos círculos imaginarios. El gradiente radial parte desde la circunferencia del primer circulo, y se va hacia la circunferencia del segundo.El método createRadialGradient(x0,y0,r0,x1,y1,r1) toma seis argumentos. Los tres primeros definen el primer circulo imaginario, x0 e y0 siendo las coordenadas del centro, mientras que r0 representa el radio del circulo.Los siguientes tres argumentos definen, de la misma manera, el segundo circulo.El método addColorStop(stop,color) toma dos argumentos.El primer argumento, stop, puede tomar valores desde 0.0 hasta 1.0, y representa una posición a lo largo del vector gradiente definido anteriormente con método createLinearGradient(). Podemos utilizar el métodoaddColorStop() tantas veces como creamos necesario.El segundo argumento representa el color, que puede tomar cualquier valor aceptado en el CSS ( nombres de colores, valores hex, rgb, rgba, hsl, hsla).Veamos un ejemplo. A continuación dibujaremos un rectángulo que cubrirá todo el lienzo, desde la esquina izquierda arriba ( x = 0, y = 0 ) hasta la esquina derecha abajo ( x = canvas.width, y = canvas.height ).Utilizando el método createRadialGradient() crearemos un gadiente radial, que utilizaremos para rellenar este rectángulo.Al final dibujaremos dos circulos que coincidan con los dos circulos imaginarios que hemos utilizado para definir el gradiente.

<canvas id= "lienzo" width= "250" height= "255">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.rect(0,0,canvas.width,canvas.height); var grd = ctx.createRadialGradient(80, 125, 25, 125, 125, 120);// x0, y0, r0, x1, y1, r1 grd.addColorStop(0, "#8df"); grd.addColorStop(1, "#04b"); ctx.fillStyle = grd; ctx.fill(); ctx.lineWidth = 1; ctx.beginPath(); ctx.strokeStyle = "#04b"; ctx.arc(80, 125, 25, 0, 2 * Math.PI);// x0, y0, r0 ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#8df"; ctx.arc(125, 125, 120, 0, 2 * Math.PI);// x1, y1, r1 ctx.stroke(); }

http://w3.unpocodetodo.info/css3/hsl.php

http://w3.unpocodetodo.info/css3/rgb.php

http://w3.unpocodetodo.info/css3/hex.php

http://w3.unpocodetodo.info/utiles/colores-alfabeticamente.php

} }

Como crear patrones

El <canvas> nos lo pone fácil a la hora de crear y utilizar patrones ( patterns ). Un patrón puede ser creado a partir de una imagen, un video, o incluso de otro <canvas>, y puede ser configurado para repetirse en todas las direcciones, o puede repetirse en una sola dirección, ( en x o en y ).Incluso puede ser configurado para que no se repita.Para crear patrones utilizaremos el método createPattern(img, dir). El primer argumento representa la imagen que utilizaremos para nuestro patrón. El segundo argumento representa la dirección, y puede tomar los siguientes valores, que tienen el mismo significado que en el CSS: no-repeat, repeat, repeat-x y repeat-y.


fillStyle context.fillStyle=color|gradient|pattern; Determina o devuelve el color, gradiente o patrón del relleno. black

strokeStyle context.strokeStyle = color | gradiente | patrón; Determina o devuelve el color, gradiente o patrón de la línea. negro

createPattern() context.createPattern(img,"repeat | repeat-x | repeat-y | no-repeat");

Repite una imagen en la dirección especificada.

fillRect() context.fillRect(x,y,anchura,altura); Dibuja y rellena un rectángulo desde un punto (x,y). black

fillText() context.fillText(text,x,y,maxWidth); maxWidth opcional black;


Vea la chuleta con las propiedades y metodos() de canvas.Crear un patrón desde una imagenCuando creamos un patrón desde una imagen es mejor hacerlo cuando la imagen se haya cargado (img.onload), ya que las imágenes pueden cargarse lentamente, y probar a crear un patrón desde una imagen inexistente, resultaría en error.Para que esto no pase, escribiremos una función anónima que creará el patrón, y enlazaremos esta función como retrollamada ( callback ) al evento onload.Veamos un ejemplo.

A continuación utilizaremos una pequeña imagen como patrón para nuestro <canvas>.


Crearemos el patrón ( pattern ) utilizando el método createPattern() y asignaremos su valor a la propiedadfillStyle(), para un relleno, o a la propiedad strokeStyle() para dibular un borde.

<canvas id= "lienzo" width= "250" height= "160">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // crear un patrón de relleno desde una imagen var patron = new Image(); patron.onload = function() { ctx.fillStyle = ctx.createPattern(patron,"repeat"); ctx.fillRect(50,50, canvas.width-100, canvas.height-100); // crear un borde utilizando un patrón ctx.strokeStyle = ctx.createPattern(patron,"repeat"); ctx.lineWidth = 20; ctx.strokeRect(10,10, canvas.width-20, canvas.height-20); } patron.src = "images/pattern.png"; } } }

Crear un patrón desde otro canvasTambién podemos crear patrones utilizando otro canvas en lugar de imagen.Veamos un ejemplo.Primero dibujaremos en un pequeño canvas (id="patron" width="10" height="15") una línea oblicua. Esta será la imagen que se repitirá para crear un patrón en el otro canvas (id="lienzo1" width="200" height="160")

<canvas id= "patron" width= "10" height= "15">Su navegador no soporta canvas :( </canvas> <canvas id= "lienzo1" width= "200" height= "160">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvasP = document.getElementById("patron"); if (canvasP && canvasP.getContext) { var ctxP = canvasP.getContext("2d"); if (ctxP) { // creamos el patrón. ctxP.lineWidth = 1; ctxP.strokeStyle = "#ccc"; ctxP.beginPath();

ctxP.moveTo(canvasP.width, 0); ctxP.lineTo(0, canvasP.height); ctxP.stroke(); } } var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.save(); // aplicamos el patrón ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat"); ctx1.fillRect(0,0, canvas1.width, canvas1.height); ctx1.restore(); ctx1.font="18px Arial"; ctx1.textAlign="center"; ctx1.textBaseline="middle"; ctx1.fillText("lienzo1", canvas1.width/2, canvas1.height/2); } } }

Aplicar sombras

Las sombras pueden ser aplicadas a todos los trazados que dibujamos en el <canvas>.Hay cuatro propiedades que determinan las características de las sombras: shadowColor ( el color ), shadowBlur ( el desenfoque ), shadowOffsetX ( el desplazamiento horizontal ) y shadowOffsetY ( el desplazamiento vertical ).Las propiedades shadowOffsetX y shadowOffsetY pueden tomar valores tanto positivas ( la sombra cae hacia la derecha y abajo ) como negativas ( hacia la izquierda y arriba ).


shadowColor context.shadowColor=color; Determina (sets) o devuelve (returns) el color utilizado para las sombras.

#000000;transparente


shadowBlur context.shadowBlur=number; Determina (sets) o devuelve (returns) el nivel de desenfoque de las sombras. 0

shadowOffsetX context.shadowOffsetX=number;Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto.

0

shadowOffsetY context.shadowOffsetY=number;Determina (sets) o devuelve (returns) la distancia horizontal entre la sombra y la forma que la genera. El valor tiene que ser > 0 para que la sombra tenga efecto.

0

Vea la chuleta con las propiedades y metodos() de canvas.Veamos un ejemplo. A continuación aplicaremos una sombra tanto a un rectángulo como a un texto.

<canvas id= "lienzo" width= "250" height= "180">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.shadowBlur=5; ctx.shadowOffsetX=2; ctx.shadowOffsetY=2; ctx.shadowColor="#333"; // rectangulo ctx.fillStyle="white"; ctx.fillRect(20,20,100,80); // texto ctx.font = "18px Verdana"; ctx.textAlign = "center"; ctx.fillText("Los gozos y las sombras", canvas.width/2, 150); } } }

Transparencia (globalAlpha)


La propiedad globalAlpha determina ( sets ) o devuelve ( returns ) el valor alfa o la opacidad real del dibujo.Puede tomar valores entre 0.0 ( totalmente transparente ) y 1.0 ( totalmente opaco ).


globalAlpha

context.globalAlpha = numero

Determina (sets) o devuelve (returns) el valor alfa o la transparencia actual del dibujo. 1.0

Vea la chuleta con las propiedades y metodos() de canvas.Un ejemplo fácilA continuación superpondremos tres rectángulos que tendrán una opacidad alpha de 75%. ( context.globalAlpha = .75 )

<canvas width= "250" height= "150" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo1"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.globalAlpha=0.75; ctx.fillStyle="#f00"; ctx.fillRect(60,20,75,50); ctx.fillStyle="#0f0"; ctx.fillRect(90,50,75,50); ctx.fillStyle="#00f"; ctx.fillRect(120,80,75,50); } } }

Escribiendo en el canvas

Para dibujar texto, utilizaremos una serie de métodos() y propiedades de <canvas>.


fillStyle context.fillStyle = color | gradiente | patrón; Determina (sets) o devuelve (returns) el color, gradiente o patrón del relleno. negro



strokeStyle context.strokeStyle = color | gradiente | patrón;



font context.font = "italic small-caps bold 12px arial";

Determina (sets) o devuelve (returns) las propiedades del texto ( font-style, font-variant, font-weight, font-size, font-family )

10px sans-serif

textAlign context.textAlign = "center | end | left | right | start"; Especifica el tipo de alineación del texto. start



fillText() context.fillText(text,x,y,maxWidth);Dibuja texto relleno con un color, gradiente o patrón previamente definido.maxWidth es opcional.

black

strokeText() context.strokeText(text,x,y,maxWidth);Dibuja texto bordeado con un color, gradiente o patrón previamente definido.maxWidth es opcional.

black

measureText() context.measureText(text).width; Devuelve un objeto que contiene la anchura

del texto especificado entre paréntesis.

Vea la chuleta con las propiedades y metodos() de canvas.font (utilizar fuentes)Determina las propiedades del texto, las mismas que utilizamos en CSS, y en este mismo orden: font-style, font-variant, font-weight, font-size y font-family. Podemos utilizar todas estas propiedades o solo algunas de ellas.Ejemplos: context.font="2em Verdana";context.font="italic small-caps bold 12px arial";context.font="italic bold 12pt Times New Roman, serif ";


strokeText (bordeado de texto) y fillText (relleno de texto)Canvas transforma el texto en un trazado, y exactamente como con los demás trazados podemos utilizarlineWidth, strokeStyle y fillStyle, además de métodos() específicos como fillText(), para rellenar el texto (de color, gradiente o patrón ), y strokeText(), para dibujar un borde alrededor del texto

<canvas width= "250" height= "150" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var centerX = canvas.width/2; ctx.textAlign="center"; ctx.font="30pt Verdana"; ctx.fillStyle = "blue"; ctx.fillText("fillText",centerX,60);

ctx.font="25pt Verdana"; ctx.strokeStyle="green"; ctx.lineWidth = 2; ctx.strokeText("strokeText",centerX,120); } } }

Vea la chuleta con las propiedades y metodos() de canvas.Más información acerca del soporte de canvas en los navegadoresAlineación horizontal

La propiedad textAlign especifica el tipo de alineación del texto. Puede tomar una de las siguientes valores: center( centrar texto ), left ( alinear texto a la izquierda), right ( alinear texto a la derecha ), start y end. En idiomas como el castellano, con un sistema de escritura de izquierda a derecha, start == left y end == right, mientras que en idiomas con sistemas de escritura de derecha a izquierda, como el hebreo, pasa todo lo contrario: start es lo mismo que right y end es lo mismo que left.



Determina (sets) o devuelve (returns) las propiedades del texto ( font-style, font-

10px sans-serif

http://caniuse.com/canvas

http://canvas/chuleta.php


variant, font-weight, font-size, font-family )





black


black



Vea la chuleta con las propiedades y metodos() de canvas. <canvas width= "200" height= "190" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var centerX = canvas.width/2; // crea una linea roja vertical en el centro del canvas ctx.strokeStyle="red"; ctx.moveTo(centerX,20); ctx.lineTo(centerX,170); ctx.stroke(); ctx.font="12px Arial"; // La propiedad textAlign tomando varias valores:


ctx.textAlign="left"; ctx.fillText("textAlign=left",centerX,60); ctx.textAlign="center"; ctx.fillText("textAlign=center",centerX,80); ctx.textAlign="right"; ctx.fillText("textAlign=right",centerX,100); ctx.textAlign="start"; ctx.fillText("textAlign=start",centerX,120); ctx.textAlign="end"; ctx.fillText("textAlign=end",centerX,140); } } }

Alineación horizontal

La propiedad textAlign especifica el tipo de alineación del texto. Puede tomar una de las siguientes valores: center( centrar texto ), left ( alinear texto a la izquierda), right ( alinear texto a la derecha ), start y end. En idiomas como el castellano, con un sistema de escritura de izquierda a derecha, start == left y end == right, mientras que en idiomas con sistemas de escritura de derecha a izquierda, como el hebreo, pasa todo lo contrario: start es lo mismo que right y end es lo mismo que left.




10px sans-serif





black



black



Vea la chuleta con las propiedades y metodos() de canvas. <canvas width= "200" height= "190" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var centerX = canvas.width/2; // crea una linea roja vertical en el centro del canvas ctx.strokeStyle="red"; ctx.moveTo(centerX,20); ctx.lineTo(centerX,170); ctx.stroke(); ctx.font="12px Arial"; // La propiedad textAlign tomando varias valores: ctx.textAlign="left"; ctx.fillText("textAlign=left",centerX,60); ctx.textAlign="center"; ctx.fillText("textAlign=center",centerX,80); ctx.textAlign="right"; ctx.fillText("textAlign=right",centerX,100); ctx.textAlign="start"; ctx.fillText("textAlign=start",centerX,120); ctx.textAlign="end"; ctx.fillText("textAlign=end",centerX,140); } } }


Medir texto

El método measureText() devuelve un objeto que contiene la anchura del texto especificado entre paréntesis.En el siguiente ejemplo utilizaremos el método measureText() para calcular el tamaño de fuente para que el texto escogido quepa en el <canvas>




10px sans-serif





black


black



Vea la chuleta con las propiedades y metodos() de canvas.<canvas width= "250" height= "120" id= "lienzo">Su navegador no soporta canvas :( </canvas><form><div id= "form"><select id= "citas"><option> Las tres morillas.</option>


<option> Tres morillas tan garridas.</option><option> Tres moricas tan lozanas iban a coger manzanas.</option></select><br><button type= "button" class= "tiny" id= "boton">Enviar!</button></div></form>window.onload = function() {var boton = document.getElementById("boton");boton.onclick = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // limpiamos el canvas ctx.clearRect(0,0,canvas.width,canvas.height); // queCita definida al final del script var texto = queCita(); var tamanoTexto = 30; ctx.font = tamanoTexto+"px Georgia"; // medimos la anchura del texto var anchuraTexto = ctx.measureText(texto).width; //mientras que la anchura del texto > anchura del lienzo - 20px while( anchuraTexto > canvas.width-20 ){ // reducimos el tamaño del texto con 1 px tamanoTexto--; ctx.font = tamanoTexto+"px Georgia"; anchuraTexto = ctx.measureText(texto).width; } //ahora que el texto tiene la anchura adecuada // centramos el texto ctx.textAlign = "center"; ctx.textBaseline = "middle"; // y publicamos el texto ctx.fillText(texto, canvas.width/2, canvas.height/2-20); ctx.font = "15px Georgia"; ctx.fillText("tama\361o texto: "+ tamanoTexto, canvas.width/2, canvas.height/2 + 20); } }}

function queCita(){ var citas = document.getElementById("citas"); var index = citas.selectedIndex; var texto = citas[index].text; return texto}}

Enviar!Escoge tu cita favorita y haz clic en "Enviar!"Cambio de línea

En JavaScript el metacarácter \n se utiliza para insertar un salto de línea. alert("esto inserta un\nsalto de l\355nea")

La mala noticia es que esto no funciona en el <canvas> de html5. La buena noticia es que podemos escribir una función para insertar saltos de línea. Veamos como queda.Más información acerca del uso de símbolos en javaScript.

<canvas width= "250" height= "165" id= "lienzo">Su navegador no soporta canvas :( </canvas>window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var maxWidth = 190; var padding = 30; var maxWidth = canvas.width - 2*padding; var texto = "El veloz murci\351lago hind\372 com\355a feliz cardillo y kiwi. La cig\374e\361a tocaba el saxof\363n detr\341s del palenque de paja."; var x = padding; var y = 50; var alturaDeLinea = 25; ctx.font = "12px Arial"; ctx.fillStyle = "#333"; // llama la función ajusteDeTexto ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea); }}

http://w3.unpocodetodo.info/utiles/glyphs.php

function ajusteDeTexto(texto, x, y, maxWidth, alturaDeLinea){ // crea el array de las palabras del texto var palabrasRy = texto.split(" "); // inicia la variable var lineaDeTexto var lineaDeTexto = ""; // un bucle for recorre todas las palabras for(var i = 0; i < palabrasRy.length; i++) { var testTexto = lineaDeTexto + palabrasRy[i] + " "; // calcula la anchura del texto textWidth var textWidth = ctx.measureText(testTexto).width; // si textWidth > maxWidth if (textWidth > maxWidth && i > 0) { // escribe en el canvas la lineaDeTexto ctx.fillText(lineaDeTexto, x, y); // inicia otra lineaDeTexto lineaDeTexto = palabrasRy[i]+ " " ; // incrementa el valor de la variable y //donde empieza la nueva lineaDeTexto y += alturaDeLinea; }else {// de lo contrario, si textWidth <= maxWidth lineaDeTexto = testTexto; } }// acaba el bucle for // escribe en el canvas la última lineaDeTexto ctx.fillText(lineaDeTexto, x, y);}}

Texto con reflejo

Para crear texto con reflejo utilizaremos otros dos métodos de <canvas> translate() y scale(). También aplicaremos transparencia con globalAlpha.



Determina (sets) o devuelve (returns) las propiedades del texto ( font-style, font-

10px sans-serif

http://w3.unpocodetodo.info/canvas/globalAlpha.php

http://w3.unpocodetodo.info/canvas/transform.php

http://w3.unpocodetodo.info/canvas/transform.php


variant, font-weight, font-size, font-family )





black


black



Vea la chuleta con las propiedades y metodos() de canvas. <canvas id= "lienzo" width= "250" height= "200">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var text = "Las Tres Morillas"; ctx.font = "20pt Comic Sans MS"; ctx.textAlign = "center"; ctx.fillStyle = "blue"; // dibuja el texto ctx.fillText(text,canvas.width / 2, (canvas.height/2)-2); // translada el contexto en el centro del canvas ctx.translate(canvas.width / 2, (canvas.height/2)+2); // voltea horizontalmente el contexto


// el segundo parámetro de scale es un número negativo ctx.scale(1, -1); // transparencia ctx.globalAlpha = 0.1; // dibuja de nuevo el texto ctx.fillText(text,0,0); } } }

Transformaciones

Las transformaciones son muy importantes a la hora de manipular los trazados . El <canvas> de HTML5 viene de fabrica con tres tipos de transformaciones: tanslate(), scale() y rotate(), además de otros dos métodos que nos permiten hacer transformaciones a medida: transform() y setTransform().Importante: las transformaciones son aditivas, o sea: cada transformación se sumará a la transformación anterior.


translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado(x,y). 0,0

rotate() context.rotate(ángulo);Gira los trazados posteriores un ángulo dado (en radianes). El punto alrededor del cual gira coincide con el origen del<canvas> (0,0)

0



1,1

transform() context.transform(a,b,c,d,e,f); Cambia los trazados posteriores, cambiando la matriz de estos. 1,0,0,0,1,0

setTransform() context.setTransform(a,b,c,d,e,f); Reinicia el canvas a los valores iniciales, antes de proceder a

cambiar los trazados posteriores. 1,0,0,0,1,0

Vea la chuleta con las propiedades y metodos() de canvas.Trasladar con translate()


El método translate() mueve el origen (0,0) del <canvas> en un punto dado. A continuación dibujaremos un rectángulo con fillRect(). Situaremos el rectángulo en el origen del <canvas>. Aplicaremos el métodotranslate() y volveremos a dibujar otro rectángulo igual. Veamos que pasa.

<canvas width= "250" height= "240" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.fillStyle = "blue"; ctx.fillRect(0,0,100,50); ctx.translate(75, 100); ctx.fillStyle = "red"; ctx.fillRect(0,0,100,50); } }}

Girar con rotate()El método rotate() gira los trazados posteriores con un ángulo dado (en radianes). El punto alrededor del cual gira coincide con el origen del contexto (0,0). Si queremos que un trazado gire alrededor de otro punto, tendremos que trasladar el origen del contexto en este punto antes de girar.A continuación utilizaremos un bucle for ( for loop ) para dibujar una série de rectángulos. Después de cada rectángulo giraremos el contexto 20° (Math.PI/9) en el sentido del reloj.Como que las transformaciones son cumulativas, y los rectángulos giran alrededor del origen del contexto, al final tendremos algo parecido a un abanico de rectángulos.

<canvas width= "250" height= "240" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo1"); if (canvas && canvas.getContext) { var ctx1 = canvas.getContext("2d"); if (ctx1) { var cw = canvas.width; var ch = canvas.height; var w = 100; var h = 15; for( var i = 0; i<5; i++ ){ ctx1.fillStyle = "blue"; //dibujamos un rectangulo ctx1.fillRect((cw-w)/2, 0, w, h);

// giramos 20 grados ctx1.rotate(Math.PI/9); } } } }

Cambiar el centro de rotaciónSi queremos que un trazado gire alrededor de otro punto (que no sea el la esquina izquierda arriba del <canvas>) tendremos que trasladar el origen del contexto en el punto deseado.A continuación trasladamos el origen en el centro del canvas y utilizaremos un bucle for ( for loop ) para dibujar una série de cuadrados. Haremos que los cuadrados sean transparentes (ctx.globalAlpha=0.4) y azules. Después de dibujar cada cuadrado giraremos el contexto 60º (Math.PI/3) en el sentido del reloj. Veamos como queda.

<canvas width= "250" height= "240" id= "lienzo2">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas2 = document.getElementById("lienzo2"); if (canvas2 && canvas2.getContext) { var ctx2 = canvas2.getContext("2d"); if (ctx2) { var cw = canvas2.width; var ch = canvas2.height; var w = 50; var h = 50; ctx2.fillStyle = "blue"; ctx2.globalAlpha=0.4; // trasladamos el origen en el centro del canvas ctx2.translate(cw/2, ch/2); for( var i = 0; i<6; i++){ // giramos 60 grados ctx2.rotate(Math.PI/3); //dibujamos un nuevo rectangulo ctx2.fillRect(-w,-h,w,h); ctx2.strokeRect(-w,-h,w,h); } } } }

Redimensionar con scale()

El método scale(h,v) reduce o amplía a escala el dibujo actual, donde h representa la escala horizontal, y v la escala vertical. Por ejemplo: si h = 0.5 la altura se verá reducida a un 50%. Si por el contrario v = 2, la anchura aumentara a 200% de su valor inicial. Veamos un ejemplo.

<canvas width= "250" height= "100" id= "lienzo3">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas3 = document.getElementById("lienzo3"); if (canvas3 && canvas3.getContext) { var ctx3 = canvas3.getContext("2d"); if (ctx3) { ctx3.fillStyle = "#f00"; ctx3.lineWidth=5; // dibuja el rectángulo pequeño ctx3.strokeRect(12,15,25,15); ctx3.fillRect(12,15,25,15); // redimensiona ctx3.scale(5,2.5); // el mismo código que dibujó el rectángulo pequeño // dibuja ahora el rectángulo grande ctx3.strokeRect(12,15,25,15); ctx3.fillRect(12,15,25,15); } } }

Transformaciones a medida

Además de mover con tanslate(), redimensionar con scale() y girar con rotate(), el <canvas> de HTML5 dispone de dos métodos que nos permiten hacer transformaciones a medida: transform() y setTransform().


translate() context.translate(x,y); Mueve el origen (0,0) del <canvas> en un punto dado(x,y). 0,0

rotate() context.rotate(ángulo);Gira los trazados posteriores un ángulo dado (en radianes). El punto alrededor del cual gira coincide con el origen del<canvas> (0,0)

0




1,1

transform() context.transform(a,b,c,d,e,f); Cambia los trazados posteriores, cambiando la matriz de estos. 1,0,0,0,1,0

setTransform() context.setTransform(a,b,c,d,e,f); Reinicia el canvas a los valores iniciales, antes de proceder a

cambiar los trazados posteriores. 1,0,0,0,1,0


Cada objeto en el <canvas> tiene una matriz de transformación. o

La matriz inicial (sin transformación alguna) tiene este aspecto: El método transform() substituye la matriz actual del objeto, por otra, y toma 6 argumentos (a,b,c,d,e,f). Los 6 argumentos corresponden a los 6 primeros elementos de la matriz y representan:

a rx Redimensiona horizontalmente el dibujo. ejemplo

b sy Sesga verticalmente el dibujo ejemplo

c sx Sesga horizontalmente el dibujo ejemplo

d ry Redimensiona verticalmente el dibujo ejemplo

e mx Mueve horizontalmente el dibujo ejemplo


f my Mueve verticalmente el dibujo ejemplo

Transformar con transform()Empezaremos dibujando un cuadrado: ctx.fillRect(0,0,50,50) azul (#0000FF) que dejaremos como testigo en la esquina superior izquierda. A continuación cambiaremos el color, transformaremos el contexto del <canvas> conctx.transform(.7,.7,-.7,.7,125,10) y dibujaremos de nuevo el mismo rectángulo. Repetiremos esta operación dos veces más, y como que las transformaciones en el canvas son cumulativas, cada vez obtendremos algo diferente.

<canvas width= "250" height= "280" id= "lienzo">Su navegador no soporta canvas :( </canvas>window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { ctx.fillStyle = "#0000FF"; ctx.fillRect(0,0,50,50); ctx.fillStyle = "#1E90FF"; ctx.transform(.7, .7, -.7, .7, 125,10); ctx.fillRect(0,0,50,50); ctx.fillStyle = "#FF0000"; ctx.transform(.7, .7, -.7, .7, 135,10); ctx.fillRect(0,0,50,50); ctx.fillStyle = "#FF9900"; ctx.transform(.7, .7, -.7, .7, 145,10); ctx.fillRect(0,0,50,50); } }}

Transformar con setTransform()A diferencia de transform(), el método setTransform() no es cumulativo, ya que vuelve a poner a cero ( set ) el contexto del <canvas>.A continuación aprovecharemos el código del ejemplo anterior con la única diferencia que utilizaremos el métodosetTransform() en lugar de transform().Veamos la diferencia.

<canvas width= "250" height= "100" id= "lienzo1">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { ctx1.fillStyle = "#0000FF"; ctx1.fillRect(0,0,50,50);

ctx1.fillStyle = "#1E90FF"; ctx1.setTransform(.7, .7, -.7, .7, 125,10); ctx1.fillRect(0,0,50,50); ctx1.fillStyle = "#FF0000"; ctx1.setTransform(.7, .7, -.7, .7, 135,10); ctx1.fillRect(0,0,50,50); ctx1.fillStyle = "#FF9900"; ctx1.setTransform(.7, .7, -.7, .7, 145,10); ctx1.fillRect(0,0,50,50); } } }

Trabajar con imágenes

También podemos utilizar imágenes en el canvas. Lo podemos hacer utilizando las reglas del CSS para establecer una imagen como fondo del canvas ( canvas{ background-image:url(img.png);} ) , o lo podemos hacer de manera dinámica utilizando métodos() y propiedades especificas.




drawImage() context.drawImage(img,sx,sy,sw,sh,x,y,w,h);


Vea la chuleta con las propiedades y metodos() de canvas.En este segundo supuesto, podemos utilizar:

- una imagen desde archivo. - una imagen ya existente en la página.


- una imagen dibujada en otro canvas.También podemos redimensionar, recortar o reposicionar esta imagen. Veamos como y vayamos por partes.Imagen desde archivo.Cuando queremos utilizar una imagen desde un archivo, hay que llamar el método drawImage() solo cuando la imagen se haya cargado (img.onload ), ya que las imágenes pueden cargarse lentamente, y probar a utilizar una imagen inexistente, resultaría en error.Para que esto no pase, escribiremos una función anónima que llamará drawImage(), y enlazaremos esta función como retrollamada ( callback ) al evento onload.A continuación utilizaremos em método drawImage(img,x,y) en su forma más sencilla: con solo tres argumentos.

<canvas id= "lienzo" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var img=new Image(); img.src = "images/enfeinada250.jpg"; img.onload = function() { ctx.drawImage(this, 0, 0); } } } }

Imagen ya existente en la página( reposicionar y redimensionar una imagen )Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediantedocument.getElementById(), por ejemplo ), y podemos utilizar esta variable con el método drawImage() para dibujar la imagen en el <canvas>.Como ya hemos adelantado, podemos reposicionar y redimensionar la imagen.En el siguiente ejemplo reduciremos tanto la anchura como la altura de la imagen a la mitad , y la posicionaremos en el centro del <canvas>.Para esto utilizaremos el método drawImage(img,x,y,w,h) junto con cinco argumentos. El método dibujará una imagen (img) en el canvas desde el punto (x,y), donde w y h son el ancho y el alto de la imagen, respectivamente.

<img id= "img" src= "images/enfeinada250.jpg" width= "250" height= "232" alt= "enfeinada" /> <canvas id= "lienzo1" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { var img1 = document.getElementById("img"); var x = ( canvas1.width - (img1.width/2) ) /2;

var y = ( canvas1.height - (img1.height/2) ) /2; var w = img1.width/2; var h = img1.height/2; ctx1.drawImage( img1, x, y ,w, h ); } } }

Imagen desde otro canvas( recortar reposicionar y redimensionar una imagen )También podemos utilizar una imagen previamente dibujada en otro <canvas>. En el siguiente ejemplo utilizaremos la imagen de <canvas id="lienzo2"> que recortaremos y redimensionaremos antes de colocarla en el <canvas id="lienzo3">.

Para esto utilizaremos el método drawImage(img,sx,sy,sw,sh,x,y,w,h) junto con nueve atributos.Este método recorta la imagen (img) empezando desde un punto (sx, sy), sw y sh siendo el ancho y el alto de la zona recortada.A continuación dibujaremos esta imagen en el otro canvas desde el punto (x, y), donde w y h son el ancho y el alto de la imagen resultante.

<canvas id= "lienzo2" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> <canvas id= "lienzo3" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { // de este canvas copiamos la imagen var canvas2 = document.getElementById("lienzo2"); if (canvas2 && canvas2.getContext) { var ctx2 = canvas2.getContext("2d"); if (ctx2) { var img2 = document.getElementById("img"); ctx2.drawImage( img2,0,0 ); } } // a este canvas pegamos la imagen recortada var canvas3 = document.getElementById("lienzo3"); if (canvas3 && canvas3.getContext) { var ctx3 = canvas3.getContext("2d"); if (ctx3) { var img3 = canvas2; var sx = 50; var sy = 40;

var sw = 140; var sh = 140; var x = 75; var y = 79; var w = 100; var h = 100; ctx3.drawImage( img3,sx,sy,sw,sh, x,y,w,h ); } } }

Trabajar con imágenes

También podemos utilizar imágenes en el canvas. Lo podemos hacer utilizando las reglas del CSS para establecer una imagen como fondo del canvas ( canvas{ background-image:url(img.png);} ) , o lo podemos hacer de manera dinámica utilizando métodos() y propiedades especificas.




drawImage() context.drawImage(img,sx,sy,sw,sh,x,y,w,h);


Vea la chuleta con las propiedades y metodos() de canvas.En este segundo supuesto, podemos utilizar:

- una imagen desde archivo. - una imagen ya existente en la página.


- una imagen dibujada en otro canvas.También podemos redimensionar, recortar o reposicionar esta imagen. Veamos como y vayamos por partes.Imagen desde archivo.Cuando queremos utilizar una imagen desde un archivo, hay que llamar el método drawImage() solo cuando la imagen se haya cargado (img.onload ), ya que las imágenes pueden cargarse lentamente, y probar a utilizar una imagen inexistente, resultaría en error.Para que esto no pase, escribiremos una función anónima que llamará drawImage(), y enlazaremos esta función como retrollamada ( callback ) al evento onload.A continuación utilizaremos em método drawImage(img,x,y) en su forma más sencilla: con solo tres argumentos.

<canvas id= "lienzo" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var img=new Image(); img.src = "images/enfeinada250.jpg"; img.onload = function() { ctx.drawImage(this, 0, 0); } } } }

Imagen ya existente en la página( reposicionar y redimensionar una imagen )Si la imagen ya existe en la página, podemos almacenar su valor en una variable ( mediantedocument.getElementById(), por ejemplo ), y podemos utilizar esta variable con el método drawImage() para dibujar la imagen en el <canvas>.Como ya hemos adelantado, podemos reposicionar y redimensionar la imagen.En el siguiente ejemplo reduciremos tanto la anchura como la altura de la imagen a la mitad , y la posicionaremos en el centro del <canvas>.Para esto utilizaremos el método drawImage(img,x,y,w,h) junto con cinco argumentos. El método dibujará una imagen (img) en el canvas desde el punto (x,y), donde w y h son el ancho y el alto de la imagen, respectivamente.

<img id= "img" src= "images/enfeinada250.jpg" width= "250" height= "232" alt= "enfeinada" /> <canvas id= "lienzo1" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas1 = document.getElementById("lienzo1"); if (canvas1 && canvas1.getContext) { var ctx1 = canvas1.getContext("2d"); if (ctx1) { var img1 = document.getElementById("img"); var x = ( canvas1.width - (img1.width/2) ) /2;

var y = ( canvas1.height - (img1.height/2) ) /2; var w = img1.width/2; var h = img1.height/2; ctx1.drawImage( img1, x, y ,w, h ); } } }

Imagen desde otro canvas( recortar reposicionar y redimensionar una imagen )También podemos utilizar una imagen previamente dibujada en otro <canvas>. En el siguiente ejemplo utilizaremos la imagen de <canvas id="lienzo2"> que recortaremos y redimensionaremos antes de colocarla en el <canvas id="lienzo3">.

Para esto utilizaremos el método drawImage(img,sx,sy,sw,sh,x,y,w,h) junto con nueve atributos.Este método recorta la imagen (img) empezando desde un punto (sx, sy), sw y sh siendo el ancho y el alto de la zona recortada.A continuación dibujaremos esta imagen en el otro canvas desde el punto (x, y), donde w y h son el ancho y el alto de la imagen resultante.

<canvas id= "lienzo2" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> <canvas id= "lienzo3" width= "250" height= "232">Su navegador no soporta canvas :( </canvas> window.onload = function() { // de este canvas copiamos la imagen var canvas2 = document.getElementById("lienzo2"); if (canvas2 && canvas2.getContext) { var ctx2 = canvas2.getContext("2d"); if (ctx2) { var img2 = document.getElementById("img"); ctx2.drawImage( img2,0,0 ); } } // a este canvas pegamos la imagen recortada var canvas3 = document.getElementById("lienzo3"); if (canvas3 && canvas3.getContext) { var ctx3 = canvas3.getContext("2d"); if (ctx3) { var img3 = canvas2; var sx = 50; var sy = 40;

var sw = 140; var sh = 140; var x = 75; var y = 79; var w = 100; var h = 100; ctx3.drawImage( img3,sx,sy,sw,sh, x,y,w,h ); } } }

Manipular imágenes

El <canvas> nos permite modificar, uno por uno, los píxeles de una imagen. Para esto tenemos a nuestra disposición tres propiedades y tres métodos() de <canvas>Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost.





createImageData() context.createImageData( ancho, alto );

Crea un nuevo objeto ImageData en blanco. Toma dos argumentos: la anchura y la altura del objeto creado

createImageData() context.createImageData(imgData);

Crea un nuevo objeto ImageData con las mismas dimensiones que el objeto especificado por el argumanto imgData.



putImageData() context.putImageData( imgData, x, y,[dirtyX, dirtyY, dirtyWidth, dirtyHeight] );

Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en el canvas

Vea la chuleta con las propiedades y metodos() de canvas.Un poco de teoría

Los píxeles de una imagen "en crudo" tienen una "anchura" de 4 bytes, uno por cada componente R G B A. (Red (rojo), Green (verde), Blue (azul) y Alpha). Accediendo uno por uno los pixeles de una imagen podemos modificar estos componentes de color, y por tanto manipular el aspecto de las imágenes en el<canvas>.Ojo: por razones de seguridad el <script> que manipulará estos bytes tiene que provenir de la misma página web. De otra manera el acceso al <script> será denegado y el navegador levantará una excepción de seguridad.Un ejemplo fácilA continuación dibujaremos un cuadrado. Ya lo se, sería mucho más fácil dibujarlo con fillRect(), pero es solo para demonstrar como podemos dibujar una imagen sencilla partiendo prácticamente desde cero.

1. El método createImageData(anchura , altura) crea un nuevo objeto ImageData en blanco, de anchura y altura dadas. 2. En el siguiente paso iremos de pixel en pixel modificando uno por uno el valor de los componentes RGBA.

Como ya hemos visto cada pixel tiene una "anchura" de 4 bytes, donde el primer byte representa el rojo, el segundo representa el verde, el tercero el azul y el cuarto es el componente alpha o el grado de transparencia.Siendo bytes pueden tomar valores entre 0 y 255.En el siguiente ejemplo manipularemos cada pixel para que:

o el rojo = 255; (100%)o el verde = 0;(ausente)o el azul = 0; (ausente)o alpha = 255; (totalmente opaco)


3. Después de manipular los pixeles volvemos a colocar la imagen en el <canvas>con putImageData().El método putImageData() toma (en este caso) tres argumentos: la imagen manipulada y las coordenadas x e y de donde poner la imagen en el <canvas>

<canvas width= "250" height= "120" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // 1. crea un objeto ImageData en blanco var imgData=ctx.createImageData(100,100); // 2. para cada pixel modifica el valor de los componentes RGBA for (var i = 0; i < imgData.data.length; i+= 4) { imgData.data[i+0]=255; // rojo = 100% imgData.data[i+1]=0; // verde - ausente imgData.data[i+2]=0; // azul - ausente imgData.data[i+3]=255; // alpha - opaco } // 3. coloca la nueva imagen en el canvas ctx.putImageData(imgData,75,10); } } }

El negativo de una imagen

A continuación veremos un ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como poner una imagen en negativo en el <canvas>.Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost



height imgData.height Devuelve la altura del objeto ImageData,


en píxeles








Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en la lona

Vea la chuleta con las propiedades y metodos() de canvas.Colores complementarios con rgb.Llamamos colores complementarios los colores diametralmente opuestos en el circulo cromático.Para encontrar el color complementario de un color dado en rgb, empezaremos separando el color en sus componentes cromáticos.Tomemos por ejemplo este verde: rgb(106, 177, 80). Sus componentes cromáticos son:r (rojo) = 106g (verde) = 177b (azul) = 80;A continuación calcularemos el valor de cada componente cromático del color complementario (diametralmente opuesto), teniendo en cuenta que el valor máximo que pueden tomar estos componentes es 255.r (rojo) = 255 – 106 = 149g (verde) = 255 - 177 = 78b (azul) = 255 – 80 = 175El código rgb del color complementario es : rgb(149, 78, 175).Invertir los colores de una imagen


Para sacar el negativo de una imagen en colores, hay que acceder uno por uno cada pixel de esta imagen y cambiar el color del pixel por el color complementario, y esto ya sabemos como hacerlo.Esta vez no manipularemos toda la imagen sino una zona. El método putImageData() toma en este caso siete argumentos:la imagen manipulada imgData, las coordenadas x e y de donde poner la imagen en el <canvas> las coordenadas dirtyX y dirtyY de donde empezar a manipular la imagen la anchura dirtyWidth y la altura dirtyHeight del rectángulo manipulado.

<img id= "alFaro" src= "images/enfeinada250.jpg" alt= "al faro" /> <canvas width= "250" height= "232" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var srcImg = document.getElementById("alFaro"); ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height); var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var pixels = imgData.data; for (var i = 0; i < pixels.length * 4; i += 4) { pixels[ i ] = 255 - pixels[ i ]; // rojo pixels[ i + 1 ] = 255 - pixels[ i + 1 ]; // verde pixels[ i + 2 ] = 255 - pixels[ i + 2] ; // azul } ctx.putImageData( imgData, 0, 0, 25, 25, 200, 182 ); } } }

mágenes en blanco y negro

A continuación veremos otro ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como convertir una imagen a blanco y negro.Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost.









http://w3.unpocodetodo.info/canvas/manipulate.php




Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en el canvas.

Vea la chuleta con las propiedades y metodos() de canvas.Convertir una imagen a blanco y negroPara convertir a blanco y negro una imagen en colores, hay que manipular uno por uno cada pixel de esta imagen y cambiar el color del pixel por el valor calculado de la luminosidad (brightness) del mismo. Para calcular la luminosidad de cada pixel utilizaremos una fórmula sacada del libro Head First Html5 Programmingvar luminosidad =( 3 * r + 4 * g + b) >>> 3Pero hay muchas y variadas fórmulas circulando libremente por internet.

<img id= "alFaro" src= "images/al_faro.jpg" alt= "al faro" /> <canvas width= "250" height= "188" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var srcImg = document.getElementById("alFaro"); ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height); var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var pixels = imgData.data; for (var i = 0; i < pixels.length * 4; i += 4) { //calcula la luminosidad percibida para este pixel var luminosidad =( 3 * pixels[i] + 4 * pixels[i + 1] + pixels[i + 2] ) >>> 3; pixels[i] = luminosidad;// rojo pixels[i + 1] = luminosidad;// verde pixels[i + 2] = luminosidad;// azul } ctx.putImageData(imgData, 0, 0); } } }

http://www.amazon.es/gp/product/1449390544/ref=as_li_ss_tl?ie=UTF8&camp=3626&creative=24822&creativeASIN=1449390544&linkCode=as2&tag=enxanetainfo-21


Imágenes en sepia

A continuación veremos otro ejemplo práctico de como manipular una imagen. Para ser más exactos veremos como convertir una imagen a tonos de sepia.Importante: si queremos experimentar manipulando imágenes en el <canvas> tenemos que hacerlo en un sitio web de verdad, como por ejemplo locahost.












Pone los datos de la imagen (de un objeto ImageData especificado) de nuevo en la lona

Vea la chuleta con las propiedades y metodos() de canvas.Convertir una imagen tonos de sepia, es muy parecido a lo que acabamos de hacer para convertir una imagen a blanco y negro. Una vez calculada la luminosidad modificaremos ligeramente el valor de cada componente de color para obtener los tonos de sepia.No hay que olvidar que el valor máximo de cada componente cromático es de 255. Para no pasarnos de 255, utilizaremos Math.min para escoger el mínimo entre el valor calculado del componente cromático y 255.

<img id= "alFaro" src= "images/al_faro.jpg" alt= "al faro" /> <canvas width= "250" height= "188" id= "lienzo">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var srcImg = document.getElementById("alFaro"); ctx.drawImage(srcImg, 0, 0, ctx.canvas.width, ctx.canvas.height); var imgData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); var pixels = imgData.data; for (var i = 0; i < pixels.length * 4; i += 4) { //calcula la luminosidad percibida para este pixel var luminosidad = .3 * pixels[i] + .6 * pixels[i + 1] + .1 * pixels[i + 2]; pixels[i] = Math.min( luminosidad+40, 255) ;// rojo pixels[i + 1] = Math.min( luminosidad+15, 255 ); // verde pixels[i + 2] = luminosidad; // azul } ctx.putImageData( imgData, 0, 0 ); } } }

http://w3.unpocodetodo.info/canvas/blancoynegro.php


Modos de fusión

Nota: Los los modos de fusión en <canvas> son una tecnología experimental. Por favor consulte el soporte en los navegadores para esta propiedad.En imágenes digitales los modos de fusión ( blend modes ) son utilizados para determinar como se fusionan dos capas. Para cada pixel, el color del elemento ( el color de origen o source color ) se combina o se fusiona ( is blended) con el color del fondo ( the backdrop ) para crear un nuevo color; y como que el color de cada pixel tiene un valor numérico, hay un gran número de posibles combinaciones.El modo de fusión por defecto en la mayoría de aplicaciones, simplemente esconde la capa inferior ( de destino ).En Photoshop, por ejemplo, para fusionar capas podemos utilizar Layer > Layer Style > Blending Options o en español: Capa > Estilos de Capa > Opciones de fusión.

http://caniuse.com/#feat=canvas-blending

En CSS3 podemos utilizar background-blend-mode para combinar dos imágenes de fondo, o una imagen y un color.Un ejemplo de exclusiónEn <canvas> utilizamos la propiedad globalCompositeOperation con este propósito. Por coherencia los valores que puede tomar globalCompositeOperation son iguales a las que utilizamos en CSS:"color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hard-light", "hue", "lighten", "luminosity", "multiply", "overlay", "saturation", "screen", "soft-light"En el siguiente ejemplo utilizamos el modo de fusión de tipo "exclusion".context.globalCompositeOperation = "exclusion";


http://w3.unpocodetodo.info/css3/blending-modes.php

El modo de fusión "exclusion" resta el valor del color más oscuro del valor del color más claro. Por ejemplo una fusión con una capa blanca produce el negativo de la imagen. Y una fusión con una capa negra deja la imagen sin cambiar.Para que haya fusión necesitamos dos imágenes – lógico. La primera imagen es un JPEG que dibujamos en el canvas utilizando el método drawImage()// crea una nueva imagenvar img=new Image(); // establece el valor del atributo src de la nueva imagenimg.src = "images/enfeinada240.jpg";// cuando la imagen se ha cargadoimg.onload = function() {// dibuja la imagen en el canvascontext.drawImage(this, 0, 0);}La segunda imagen es un rectángulo que rellenamos con un gradiente lineal:// define el tectángulo a dibujarcontext.rect(0, 0, canvas.width, canvas.height);// crea un gradiente lineal verticalvar grd = context.createLinearGradient(0, 0, 0, canvas.height);grd.addColorStop(0,"#F06");grd.addColorStop(1,"black");// define el relleno del rectángulocontext.fillStyle = grd;// dibuja el rectángulocontext.fill();

<canvas id= "lienzo" width= "240" height= "240">Por favor... Actualiza tu navegador.</canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var context = canvas.getContext("2d"); if (context) {console.log("habemus context") // utilizamos el modo de fusión de tipo "exclusion" context.globalCompositeOperation = "exclusion"; // la primera imagen var img=new Image(); img.src = "images/enfeinada240.jpg"; img.onload = function() {console.log("loaded"); context.drawImage(this, 0, 0); } //la segunda imagen

context.rect(0, 0, canvas.width, canvas.height); // crea un gradiente lineal vertical var grd = context.createLinearGradient(0, 0, 0, canvas.height); grd.addColorStop(0,"#F06"); grd.addColorStop(1,"black"); context.fillStyle = grd; context.fill(); } } }

Como ya hemos dicho el <canvas> cuenta con varios métodos de fusión, tantos como en el CSS."color", "color-burn", "color-dodge", "darken", "difference", "exclusion", "hard-light", "hue", "lighten", "luminosity", "multiply", "overlay", "saturation", "screen", "soft-light"Veamos como quedan.colorcolor-burncolor-dodgedarkendifferenceexclusionhard-lighthuelightenluminositymultiplyoverlaysaturationscreensoft-light

window.onload = function() {var body = document.querySelector(".demo") var gCO = Array("multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-

light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"); //ordena alfabeticamente el array gCO.sort() for( var i = 0; i<gCO.length; i++ ){ var gco = gCO[i];

// crea un div var elDiv = document.createElement("div"); elDiv.setAttribute("class", "large-4 columns"); // crea un elemento canvas var lienzo = document.createElement("canvas"); lienzo.setAttribute("id", "Canvas"+i); lienzo.setAttribute("width", "240"); lienzo.setAttribute("height", "240"); elDiv.appendChild(lienzo); //crea un parafo var elP = document.createElement("p"); elP.setAttribute("class", "center"); //crea el contenido del parafo var text = document.createTextNode(gco); elP.appendChild(text); elDiv.appendChild(elP); body.appendChild(elDiv); if (lienzo && lienzo.getContext) { var ctx = lienzo.getContext("2d"); if (ctx) { testGCO(lienzo, ctx, i, gco) } } } function testGCO(lienzo, ctx, i, gco){ ctx.globalCompositeOperation = gco; var img=new Image(); img.src = "images/enfeinada240.jpg"; img.onload = function(gco) { ctx.drawImage(this, 0, 0);

} ctx.rect(0, 0, lienzo.width, lienzo.height); // crea un gradiente lineal vertical var grd = ctx.createLinearGradient(0, 0, 0, lienzo.height); grd.addColorStop(0,"#F06"); grd.addColorStop(1,"black"); ctx.fillStyle = grd; ctx.fill(); } }

Que son los data:uri

Con data:URI ( definido por RFC 2397 ) podemos incluir pequeños elementos de datos en línea, como si fueran referenciados hacia una fuente externa. Los data:URI tienen la siguiente sintaxis:data:[<mediatype>][;base64],<data>El <mediatype> puede ser algo como image/png para una imagen de tipo .png. El <mediatype> es opcional, y si lo omitimos el <mediatype> por defecto es text/plain. He aquí una lista con ejemplos de <mediatype>Lo de base64 indica el tipo de codificación de los datos binarios. También es opcional. Podemos no especificarlo, como en este ejemplo: data:text/html,<h1>Hola%20mundo!</h1>, donde los datos son textuales.Finalmente <data> representa los datos codificados (o no) en base64.Si esto suena a chino, sería mejor ver algunos ejemplos.En el HTMLPodemos reemplazar el valor del atributo src con data:URI

<img alt= "punto rojo" src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" />

En el CSSPara imágenes de fondo también podemos utilizar data:URI.

.data_uri { padding-left : 5px; background-image : url("data;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA

AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="); background-repeat : no-repeat; background-position : left 7px; }

En jQuery

data:text/html,%3Ch1%3EHola%20mundo!%3C/h1%3E

data:text/html,%3Ch1%3EHola%20mundo!%3C/h1%3E

http://en.wikipedia.org/wiki/Internet_media_type#Type_image

http://en.wikipedia.org/wiki/Internet_media_type#Type_image

http://tools.ietf.org/html/rfc2397

En jQuery podemos utilizar data:URI con las funciones .insertBefore() o .insertAfter()$( '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" //>' ).insertBefore(".algo" );Como crear data:URIA continuación algunos enlaces útiles para transformar una imagen en data:URI. (Es recomendable que las imágenes sean pequeñas.)URI kitchen - la cocina URIhttp://websemantics.co.uk/ Solo imágenes tipo .png, jpg, o gif. Tamaño máximo: 32768 Bytes. Tamaño máximo de data:URI permitido en IE8 es de 32KB, o sea 32768 Bytes.http://jpillora.com Crea data:URI por transferencia de archivos con "arrastrar y soltar"O para los más atrevidos y conocedores de PHP, una función para transformar un fichero $file en data:URI.

<?php function data_uri ( $file ) { $mime = mime_content_type ( $file ) ; $contents = file_get_contents ( $file ) ; $base64 = base64_encode ( $contents ) ; return "data : $mime;base64,$base64" ; } ?>

Crear data:uri desde canvas

El método toDataURL(tipo) convierte el contenido del <canvas> en una imagen data:uri. El parámetro entre paréntesis indica el tipo de imagen y puede tomar uno de los siguientes valores:

image/gif (imagen GIF) image/jpeg (imagen JPEG) image/png (imagen Portable Network Graphics) image/svg+xml (imagen vectorial SVG) image/x-icon (imagen favorite icon)

Si no especificamos ningún tipo de imagen, el método toDataURL() toma "image/png" por defecto.A continuación dibujaremos en el <canvas> la imagen de un icono para enlaces. Procuraremos que la imagen sea muy pequeña.Una vez dibujada la imagen podemos convertirla en data:uri: var url = canvas.toDataURL();También sacaremos el código de data:uri en pantalla, de donde lo podemos copiar para utilizarlo luego en el código: document.getElementById("output").innerHTML = url;Asimismo asignaremos el data:uri resultante como valor del atributo src de una imagen:document.getElementById("img").src = url;

<span> canvas: </span><canvas width= "11" height= "12" id= "lienzo">Su navegador no soporta canvas :( </canvas> <div id= "output"></div> <span> imagen: </span><img alt= "data:uri test" id= "img" width= "11" height= "12" src= "images/dot.png" /> window.onload = function() { var Canvas = document.getElementById("lienzo");

http://jpillora.com/base64-encoder/

http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

http://software.hixie.ch/utilities/cgi/data/data

if (Canvas && Canvas.getContext) { var ctx = Canvas.getContext("2d"); if (ctx) { ctx.strokeStyle = "#2BA6CB"; ctx.lineWidth=2; // cuerpo ctx.scale(.6,.6); ctx.beginPath(); ctx.moveTo(8,6); ctx.lineTo(1,6); ctx.lineTo(1,16); ctx.lineTo(11,16); ctx.lineTo(11,9); //flecha ctx.moveTo(5,9); ctx.lineTo(11,3); ctx.lineTo(8,1); ctx.lineTo(16,1); ctx.lineTo(16,9); ctx.lineTo(14,6); ctx.lineTo(8,12); ctx.closePath(); ctx.stroke(); var url = Canvas.toDataURL(); document.getElementById("output").innerHTML = url; document.getElementById("img").src = url; } } }

canvas: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAA+0lEQVQoU3WQO1ICURBFz2UmsDCQHThmWBMZaAruAEON2IG6A3fgEgYDIVRXADETMAZWmYk7MJGyik9bDc7UyOdF/e4773b3FaVz3E1vKnAHHJR1r+fiXOtivTeKApt1gMYCbk1kgdHfCkdPo1p1Mu1LvL5dnbX/Pn8s4bib2ro72IOD8eOwDbpH1ArY24HGFbME2UsBSokZnxKHBexFZUFTcP1dDY/2J9MWUrKaOXwObJbNRWs5hsPvl6eDuDvsGDSEojwB1z0lX/Qf7IB/wBi4c27iui++AefLljvm2o40Vs9lZ7+r3kubm9GtlJ+9MBtfnHwVzrvAbfov9BiAsSSiHU8AAAAASUVORK5CYII=imagen:

Métodos save y restore

El contexto del <canvas> almacena lo que llamamos en ingles "the drawing state" y que podemos traducir como el estado del contexto.




Vea la chuleta con las propiedades y metodos() de canvas.El estado del contexto puede ser manipulado a través de JavaScript, y recoge los valores actuales de lineWidth,strokeStyle, fillStyle, lineCaps, etc… También recoge los valores de las entradas de la matriz actual de transformación. Estos valores pueden ser guardados con el método save(), y pueden ser recuperados con el método restore().Al guardar un estado, este se almacena encima de los anteriores en una pila y cuando llamamos el métodorestore(), este recupera el último estado guardado, lo quita de la pila y lo transforma en el actual estado del contexto.En otras palabras: el último estado guardado es el primer recuperado. Veamos un ejemplo.

<canvas id= "lienzo" width= "250" height= "240">Su navegador no soporta canvas :( </canvas> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var X = canvas.width; var Y = canvas.height; ctx.fillStyle = "#333"; ctx.fillRect(0,0,X,Y); ctx.save() // guarda el 1° estado ctx.fillStyle = "#999"; ctx.fillRect(15,15,X-30,Y-30); ctx.save(); // guarda el 2° estado ctx.fillStyle = "#ccc"; ctx.fillRect(30,30,X-60,Y-60);


ctx.save(); // guarda el 3° estado ctx.fillStyle = "#eee"; ctx.fillRect(45,45,X-90,Y-90); ctx.restore(); // recupera el 3° estado ctx.fillRect(60,60,X-120,Y-120); ctx.restore(); // recupera el 2° estado ctx.fillRect(75,75,X-150,Y-150); ctx.restore(); // recupera el 1° estado ctx.fillRect(90,90,X-180,Y-180); } } }

La posición del ratón

Para obtener la posición del ratón encima del <canvas> crearemos la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.Esta función utiliza el método getBoundingClientRect().También escribiremos otras dos funciones:marcarCoords() que da formato al <div id="output"> donde apuntaremos el valor de las coordenadas ylimpiarCoords() que borra el contenido del <div id="output">.Utilizaremos el método addEventListener() para detectar el movimiento del ratón encima del canvas ("mousemove"). En este caso marcaremos las coordenadas con marcarCoords().También utilizaremos el método addEventListener() para registrar la salida del ratón fuera del <canvas>, y en este caso llamaremos la función limpiarCoords().

<div id= "container" style= "position :relative; width :250px; height :220px; margin:0 auto 30px auto;"> <canvas id= "lienzo" width= "250" height= "220">Su navegador no soporta canvas :( </canvas> <div id= "output" style= "position :absolute; padding :5px;"></div> </div> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var output = document.getElementById("output");

https://developer.mozilla.org/es/docs/DOM/elemento.addEventListener


https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect

canvas.addEventListener("mousemove", function(evt) { var mousePos = oMousePos(canvas, evt); marcarCoords(output, mousePos.x, mousePos.y) }, false); canvas.addEventListener("mouseout", function(evt) { limpiarCoords(output); }, false); } } function marcarCoords(output, x, y){ output.innerHTML = ("x: "+x+", y: "+y); output.style.top= (y+10)+"px"; output.style.left= (x+10)+"px"; output.style.backgroundColor="#FFF"; output.style.border="1px solid #d9d9d9" canvas.style.cursor = "pointer"; } function limpiarCoords(output){ output.innerHTML =""; output.style.top= 0+"px"; output.style.left= 0+"px"; output.style.backgroundColor="transparent" output.style.border="none"; canvas.style.cursor = "default"; } function oMousePos(canvas, evt) { var ClientRect = canvas.getBoundingClientRect(); return {//objeto x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) } } }

Pase por encima del canvas para obtener la posición actual del ratón.La posición del ratón

Para obtener la posición del ratón encima del <canvas> crearemos la función oMousePos() que devuelve un objeto con las coordenadas x e y del ratón.Esta función utiliza el método getBoundingClientRect().También escribiremos otras dos funciones:marcarCoords() que da formato al <div id="output"> donde apuntaremos el valor de las coordenadas ylimpiarCoords() que borra el contenido del <div id="output">.Utilizaremos el método addEventListener() para detectar el movimiento del ratón encima del canvas ("mousemove"). En este caso marcaremos las coordenadas con marcarCoords().También utilizaremos el método addEventListener() para registrar la salida del ratón fuera del <canvas>, y en este caso llamaremos la función limpiarCoords().

<div id= "container" style= "position :relative; width :250px; height :220px; margin:0 auto 30px auto;"> <canvas id= "lienzo" width= "250" height= "220">Su navegador no soporta canvas :( </canvas> <div id= "output" style= "position :absolute; padding :5px;"></div> </div> window.onload = function() { var canvas = document.getElementById("lienzo"); if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var output = document.getElementById("output"); canvas.addEventListener("mousemove", function(evt) { var mousePos = oMousePos(canvas, evt); marcarCoords(output, mousePos.x, mousePos.y) }, false); canvas.addEventListener("mouseout", function(evt) { limpiarCoords(output); }, false); } } function marcarCoords(output, x, y){ output.innerHTML = ("x: "+x+", y: "+y); output.style.top= (y+10)+"px";



https://developer.mozilla.org/es/docs/DOM/element.getBoundingClientRect

output.style.left= (x+10)+"px"; output.style.backgroundColor="#FFF"; output.style.border="1px solid #d9d9d9" canvas.style.cursor = "pointer"; } function limpiarCoords(output){ output.innerHTML =""; output.style.top= 0+"px"; output.style.left= 0+"px"; output.style.backgroundColor="transparent" output.style.border="none"; canvas.style.cursor = "default"; } function oMousePos(canvas, evt) { var ClientRect = canvas.getBoundingClientRect(); return {//objeto x: Math.round(evt.clientX - ClientRect.left), y: Math.round(evt.clientY - ClientRect.top) } } }

Pase por encima del canvas para obtener la posición actual del ratón.Crear un canvas adaptativo

Tenemos que decirlo alto y claro: El <canvas> ( HTML5 ) no es un elemento que se adapte fácilmente a los diferentes tamaños de pantalla. No es "responsive". Las dimensiones del <canvas> vienen especificadas en pixeles en el HTML.<canvas id= "Canvas1" width="250" height="220">Su navegador no soporta canvas :( </canvas>Redimensionar el canvas con CSSPodemos redimensionar el <canvas> con CSS pero esto sería como una imagen redimensionada.En el siguiente ejemplo los dos <canvas> son iguales, con la única diferencia que el <canvas> de la derecha está redimensionado con CSS. Al redimensionar la ventana se puede apreciar claramente que el segundo <canvas>cambia de tamaño, pero sigue teniendo el mismo número de pixeles.

<div class= "contenedor"><canvas class= "lienzo" id= "lienzo1" width= "170" height= "170">Su navegador no soporta canvas :( </canvas></div> <div class= "contenedor"><canvas class= "lienzo" id= "lienzo2" width= "190" height= "190">Su navegador no soporta canvas :( </canvas></div> .contenedor {

box-sizing : border-box; float : left; width : 50%; padding : 10px; } .lienzo { border : 1px solid #d9d9d9; } #lienzo1 { float : right; } #lienzo2 { width : 50%; } window.onload = function() { var canvasP = document.createElement("canvas"); var ctxP = canvasP.getContext("2d"); if (ctxP) { // creamos el patrón. ctxP.canvas.width = 20; ctxP.canvas.height = 20; ctxP.rect(0, 0, 10, 10); ctxP.rect(10, 10, 20, 20); ctxP.fillStyle = "#d9d9d9"; ctxP.fillRect(0, 0, 10, 10); ctxP.fillRect(10, 10, 20, 20); } var canvas = document.getElementsByClassName("lienzo"); var ctx; for( var i = 0; i<canvas.length; i++){ if (canvas[i] && canvas[i].getContext) { ctx = canvas[i].getContext("2d"); if (ctx) {console.log("Habemus context") ctx.restore(); // aplicamos el patrón ctx.fillStyle = ctx.createPattern(canvasP,"repeat");

ctx.fillRect(0,0, canvas[i].width, canvas[i].height); ctx.save(); } } } }

Redimensionar el canvas con JavaScriptEn este caso queremos cambiar el tamaño del <canvas> utilizando JavaScript. Para esto en el HTML no especificamos las dimensiones del lienzo.

<div id= "div"> <canvas id= "canvas">Su navegador no soporta canvas :( </canvas> </div>

En el CSS damos al <canvas> una altura y una anchura de 100%, y al <div> que lo contiene le damos width=50%. Se trata de 50% del <article> en este caso. Al redimensionar la ventana, el <canvas> también cambia de tamaño.

#div { width : 50%; height : 80%; margin : 0 auto; } #canvas { border : 1px solid #d9d9d9; width : 100%; height : 100%; }

Queremos dibujar un circulo en el <canvas> y queremos que sea "responsive", que cambie de tamaño con el<canvas>.La idea principalCada vez que la ventana cambia de tamaño, JavaScript calcula las nuevas dimensiones del <canvas>, y dibuja el circulo en base a estas dimensiones. Lo hace llamando la función inicializarCanvas().setTimeout(function() { inicializarCanvas(); addEventListener("resize", inicializarCanvas);}, 15);Cómo lo haceEl método getComputedStyle() devuelve un objeto ( CSSStyleDeclaration ) con todos los estilos computados del elemento. Utilizamos este método para calcular la anchura y la altura del <canvas> redimensionado.var s = getComputedStyle(canvas);var w = s.widthvar h = s.height;La anchura y la altura del <canvas> vienen en pixeles así que tenemos que extraer el valor numérico.

var W = canvas.width = w.split('px')[0];var H = canvas.height = h.split('px')[0];A continuación calculamos las coordenadas del centro del circulo ( X, Y ) y el radio ( r ) utilizando la anchura ( W ) y la altura ( H ) calculadas. Utilizamos Math.floor para deshacernos de los decimales.X = Math.floor(W/2);Y = Math.floor(H/2);r = Math.floor(W/3);Y finalmente dibujamos en el <canvas>dibujarEnElCanvas(ctx);

function inicializarCanvas(){ if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { // calcula la anchura y la altura del canvas var s = getComputedStyle(canvas); var w = s.width; var h = s.height; // extrae el valor numerico W = canvas.width = w.split("px")[0]; H = canvas.height = h.split("px")[0]; // calcula las coordenadas del centro y el radio X = Math.floor(W/2); Y = Math.floor(H/2); r = Math.floor(W/3); // dibuja el circulo en el canvas dibujarEnElCanvas(ctx); } } }

La función dibujarEnElCanvas() es una función que tendremos que escribir:function dibujarEnElCanvas(ctx){ ctx.strokeStyle = "#006400"; ctx.fillStyle = "#6ab155"; ctx.lineWidth = 5; ctx.arc(X,Y,r,0,2*Math.PI); ctx.fill(); ctx.stroke();}

Ahora lo ponemos todo junto window.onload = function() { var canvas = document.querySelector("#canvas"); var X,Y,W,H,r; canvas.height = 250; function inicializarCanvas(){ if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); if (ctx) { var s = getComputedStyle(canvas); var w = s.width; var h = s.height; W = canvas.width = w.split("px")[0]; H = canvas.height = h.split("px")[0]; X = Math.floor(W/2); Y = Math.floor(H/2); r = Math.floor(W/3); dibujarEnElCanvas(ctx); } } } function dibujarEnElCanvas(ctx){ ctx.strokeStyle = "#006400"; ctx.fillStyle = "#6ab155"; ctx.lineWidth = 5; ctx.arc(X,Y,r,0,2*Math.PI); ctx.fill(); ctx.stroke(); } setTimeout(function() { inicializarCanvas(); addEventListener("resize", inicializarCanvas); }, 15);

}Al redimensionar la ventana tanto el <canvas> como el circulo dibujado dentro cambia de tamaño. El borde queda siempre de 5px ( ctx.lineWidth = 5 ) como establecido en la función dibujarEnElCanvas().- El método getComputedStyle

https://developer.mozilla.org/es/docs/DOM/Window.getComputedStyle

Canvas.docx

Documents

numerodetermina sets

numberdetermina sets

heightdetermina sets

bevelroundmiterdetermina

widthdetermina sets

buttroundsquaredetermina

colordetermina sets

color gradiente patrndetermina