2.5 KiB
title | localeTitle |
---|---|
Paths | Caminos |
Senderos en lienzo
Los caminos son la piedra angular del dibujo en Canvas. Un camino es solo una forma. Luego, la forma se puede dibujar ya sea acariciándola o rellenándola.
Podemos crear rutas de uso con beginPath
, fill
y stroke
.
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.fillStyle="black";
ctx.fill();
Esto crea un cuadrado negro en la esquina superior derecha del lienzo. Podemos cambiar los trazos y rellenos con strokeStyle
y fillStyle
, que ambos toman cadenas de colores similares a CSS. También podemos usar lineWidth
para hacer trazos más gruesos.
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.moveTo(0, 100);
ctx.lineTo(300, 250);
ctx.strokeStyle="red";
ctx.lineWidth=2;
ctx.stroke();
Hay cuatro funciones básicas de dibujo: rect
, moveTo
, lineTo
y arc
.
rect(x, y, width, height)
agrega un rectángulo creado a partir de (x
,y
) de dimensiones (width
,height
) a la ruta.moveTo(x,y)
mueve el lápiz a un punto en el lienzolineTo(x,y)
mueve el lápiz a un punto en el lienzo, luego agrega una línea entre el punto nuevo y el punto anterior a la ruta.arc(x, y, r, ti, tf)
agrega un arco (una porción de un círculo) a (x
,y
), del radior
, y desde el ánguloti
atf
a la trayectoria.
Tenga en cuenta que estas funciones se agregan a la ruta de trabajo. No crean nuevos caminos.
//example 1
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.fill();
//example 2
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.beginPath();
ctx.rect(100, 100, 50, 50);
ctx.fill();
El primer ejemplo dibujará dos cuadrados, mientras que el segundo solo dibujará uno ya que beginPath
descartó el primer rectángulo en la ruta de trabajo anterior.
Este hecho lleva a un error común al hacer animaciones de canvas
.
var x = 0;
var y = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.rect(x, y, 50, 50);
ctx.fill();
x+=1;
window.requestAnimationFrame(draw);
}
window.requestAnimationFrame(draw);
La animación anterior, que se supone que hace un movimiento cuadrado en la pantalla, crea una barra negra larga. La razón es que no se llama a beginPath
dentro del ciclo de draw
.
Para leer más sobre animación, vea la página de animación .