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.
| Método | JavaScript | Descripción | Defecto |
|---|---|---|---|
| rect() | context.rect(x,y,anchura,altura); | Define 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). | |
| lineWidth | context.lineWidth = numero; | Determina (sets) o devuelve (returns) la grosor de la línea. | 1 |
| strokeStyle | context.strokeStyle = color | gradient | pattern; | 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ángulo
Veamos un ejemplo. A continuación queremos dibujar un rectángulo. Utilizamos lineWidth y strokeStyle para establecer el estilo de línea, y fillStyle para establecer el tipo de relleno.
Para esbozar y dibujar el rectángulo utilizamos el método strokeRect() y para el esbozar y rellenar el método fillRect()
.
contexto.strokeRect(x,y,anchura,altura); contexto.fillRect(x,y,anchura,altura);
Donde:
- x e y representan las coordenadas de la esquina izquierda arriba del rectángulo,
- anchura representa la anchura del rectángulo y
- altura representa la altura del rectángulo
Observe por favor que esta vez no necesitamos utilizar stroke() para marcar el rectángulo, ya que strokeRect() define y dibuja el rectángulo en el
mismo tiempo. Lo mismo pasa con fillRect() que define y rellena el rectángulo a la vez.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
ctx.lineWidth = 2;
ctx.strokeStyle = "#00f";
ctx.fillStyle = "#ff0";
ctx.fillRect(60, 60, 150, 100);
ctx.strokeRect(50, 50, 150, 100);
}
}También podemos utilizar el método rect() solo para definir el rectángulo. Exactamente como en el caso de strokeRect() y
fillRect(), el método rect() toma cuatro argumentos: las coordenadas de la esquina izquierda arriba, la anchura y la altura del rectángulo.
contexto.rect(x,y,anchura,altura);
En este caso habrá que utilizar stroke() para marcar, y/o fill() para rellenar el rectángulo.
var canvas1 = document.getElementById("lienzo1");
if (canvas1 && canvas1.getContext) {
var ctx1 = canvas1.getContext("2d");
if (ctx1) {
ctx1.lineWidth = 2;
ctx1.strokeStyle = "#00f";
ctx1.fillStyle = "#ff0";
ctx1.rect(60, 60, 150, 100);
ctx1.fill();
ctx1.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, cuando utilizamos clearRect() para limpiar el canvas entre fotogramas.
En el siguiente ejemplo el <canvas> tiene una imagen de fondo asignada con el CSS.
Después de haber dibujado un rectángulo, utilizamos el método clearRect() para borrar parte de este.
var canvas2 = document.getElementById("lienzo2");
if (canvas2 && canvas2.getContext) {
var ctx2 = canvas2.getContext("2d");
if (ctx2) {
ctx2.fillStyle = "#ad0";
ctx2.fillRect(50, 40, 150, 120);
ctx2.clearRect(70, 60, 110, 60);
}
}