Canvas - la chuleta
General
Mé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 sombras
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
fillStyle | context.fillStyle = color | gradiente | patrón; | Determina o devuelve el color, gradiente o patrón del relleno. | negro |
strokeStyle | context.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 |
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 |
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
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 |
---|---|---|---|
lineWidth | context.lineWidth=numero; | Determina (sets) o devuelve (returns) la grosor de la línea. | 1 |
lineCap | context.lineCap="butt|round|square"; | Determina (sets) o devuelve (returns) el aspecto de las puntas de una línea. | butt |
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 (retursn) el aspecto de las juntas en miter. Puede tomar valores entre 1 (punta roma, aspecto biselado) y 5 (punta en angulo). | 10 |
Rectángulos
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
rect() | context.rect(x,y,anchura,altura); | Define un rectángulo desde un punto (x,y). | |
fillRect() | context.fillRect(x,y,anchura,altura); | Define y rellena un rectángulo desde un punto (x,y). | |
strokeRect() | context.strokeRect(x,y,anchura,altura); | Define y 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. |
Trazados
Mé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 centro r = radio sA = ángulo de partida en radianes eA = ángulo final en radianes aC = 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 |
|
ellipse() | context.ellipse(X, Y, rX, rY, ar, ap, af, cR); | Dibuja una elipseX y Y son las coordenadas del centro, rX y rY representan el radio en x y el radio en y,ar representa el ángulo de rotación del eje horizontal (en radianes),ap es el ángulo de partida ( en radianes ),af es el ángulo final ( en radianes ), ycR en el sentido del reloj ( false ) o en sentido contrario ( true )
|
|
isPointInPath() | context.isPointInPath(x,y); | Detecta si un punto cuyas coordenadas son x e y se encuentra en un trazado dado |
Transformations
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
scale() | context.scale(h,v); | Reduce o amplía a escala el dibujo actual. h = horizontal; v = vertical Valores 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 | |
textAlign | context.textAlign="center | end | left | right | start"; | start | |
textBaseline | context.textBaseline = "alphabetic | top | hanging | middle | ideographic | bottom"; |
Determina (sets) o devuelve (returns) la alineación vertical del texto. | alphabetic |
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
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 Drawing
Mé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 Manipulation
Propiedad | 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. |
Método | JavaScript | Descripción | Defecto |
---|---|---|---|
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 |
Compositing
Propiedad | JavaScript | Descripción | Defecto |
---|---|---|---|
globalAlpha | context.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 |
Other
Mé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" |