Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

Canvas - CSS

General

MétodoJavaScriptDescripciónDefecto
widthcanvas.widthDetermina (sets) o devuelve (returns) la anchura del canvas300
heightcanvas.heightDetermina (sets) o devuelve (returns) la altura del canvas150
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ágenimage/png

Colores, estilos, y sombras

MétodoJavaScriptDescripciónDefecto
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
lineWidthcontext.lineWidth=numero;Determina (sets) o devuelve (returns) la grosor de la línea.1
shadowColorcontext.shadowColor=color;Determina (sets) o devuelve (returns) el color utilizado para las sombras.#000000;
transparente
shadowBlurcontext.shadowBlur=number;Determina (sets) o devuelve (returns) el nivel de desenfoque de las sombras.0
shadowOffsetXcontext.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
shadowOffsetYcontext.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étodoJavaScriptDescripciónDefecto
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 circulos
r es el radio de los circulos.
 
addColorStop()gradient.addColorStop(stop,color);Especifica los colores y la posición donde para el gradiente. 

Líneas

PropiedadJavaScriptDescripciónDefecto
lineWidthcontext.lineWidth=numero;Determina (sets) o devuelve (returns) la grosor de la línea.1
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
miterLimitcontext.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étodoJavaScriptDescripciónDefecto
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étodoJavaScriptDescripciónDefecto
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 elipse
X 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 ), y
cR 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étodoJavaScriptDescripciónDefecto
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

PropiedadJavaScriptDescripciónDefecto
fontcontext.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

MétodoJavaScriptDescripciónDefecto
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étodoJavaScriptDescripciónDefecto
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

PropiedadJavaScriptDescripciónDefecto
widthimgData.widthDevuelve el ancho del objeto ImageData, en píxeles 
heightimgData.heightDevuelve la altura del objeto ImageData, en píxeles 
dataimageData.dataDevuelve un objeto conteniendo todos los datos del objeto ImageData. 

MétodoJavaScriptDescripciónDefecto
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

PropiedadJavaScriptDescripciónDefecto
globalAlphacontext.globalAlpha = numeroDetermina (sets) o devuelve (returns) el valor alfa o la transparencia actual del dibujo.1.0
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

Other

MétodoJavaScriptDescripciónDefecto
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"

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas