Operación básica del lienzo

Crear un lienzo (Canvas)

Un lienzo es un marco rectangular en una página web, que es dibujado por el elemento <canvas>.

Nota: De forma predeterminada, el elemento <canvas> no tiene borde ni contenido.

Un ejemplo simple de <canvas> es el siguiente:

Nota: La etiqueta generalmente necesita especificar un atributo de identificación (a menudo citado en scripts) y el tamaño del lienzo definido por los atributos de ancho y alto.

Sugerencia: puede utilizar varios elementos <canvas> en páginas HTML.

Use el atributo de estilo para agregar un borde:

Ejemplo

Usa JavaScript para dibujar imágenes

El elemento de lienzo en sí no tiene capacidades de dibujo. Todo el trabajo de dibujo debe realizarse dentro de JavaScript:

Ejemplo

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

ctx.fillStyle = "# FF0000";

ctx.fillRect (0,0,150,75);

Análisis de ejemplo:

Primero, busque el elemento <canvas>:

var c = document.getElementById ("myCanvas");

Luego, crea un objeto de contexto:

var ctx = c.getContext ("2d");

El objeto getContext ("2d") es un objeto HTML5 integrado que tiene una variedad de métodos para dibujar rutas, rectángulos, círculos, caracteres y agregar imágenes.

Las siguientes dos líneas de código dibujan un rectángulo rojo:

ctx.fillStyle = "# FF0000";
ctx.fillRect (0,0,150,75);

Establecer la propiedad fillStyle puede ser color CSS, degradado o patrón. La configuración predeterminada de fillStyle es # 000000 (negro).

El método fillRect ( x, y, width, height ) define el método de relleno actual del rectángulo.

Coordenadas del lienzo

Canvas es una cuadrícula bidimensional.

Las coordenadas de la esquina superior izquierda del lienzo son (0,0)

El método fillRect anterior tiene parámetros (0,0,150,75).

Significado: dibuje un rectángulo de 150x75 en el lienzo, comenzando desde la esquina superior izquierda (0,0).

Ejemplo de coordenadas

Como se muestra en la figura siguiente, las coordenadas X e Y del lienzo se utilizan para colocar la pintura en el lienzo. Las coordenadas de posicionamiento se muestran en el marco rectangular movido por el mouse.

Ruta del lienzo

Para dibujar líneas en Canvas, usaremos los siguientes dos métodos:

moveTo ( x, y ) define las coordenadas iniciales de la línea
lineTo ( x, y ) define las coordenadas finales de la línea

Para dibujar líneas, debemos usar el método "ink", al igual que stroke ().

Ejemplo

Defina la coordenada inicial (0,0) y la coordenada final (200,100). Luego usa el método stroke () para dibujar la línea:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

ctx.moveTo (0,0);

ctx.lineTo (200,100);

ctx.stroke ();

Para dibujar un círculo en lienzo, usaremos el siguiente método:

arco (x, y, r, iniciar, detener)

De hecho, usamos el método de "tinta" cuando dibujamos un círculo, como trazo () o relleno ().

Ejemplo

Utilice el método arc () para dibujar un círculo:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

ctx.beginPath ();

ctx.arc (95,50,40,0,2 * Math.PI);

ctx.stroke ();

Lienzo-texto

Use lienzo para dibujar texto, las propiedades y métodos importantes son los siguientes:

font-define la fuente
fillText ( text, x, y ): dibuja texto sólido en el lienzo
strokeText ( text, x, y ): dibuja texto hueco en el lienzo

Utilice fillText ():

Ejemplo

Utilice la fuente "Arial" para dibujar un texto de 30 píxeles de alto (sólido) en el lienzo:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

ctx.font = "30px Arial";

ctx.fillText ("Hola mundo", 10,50);

Utilice strokeText ():

Ejemplo

Utilice la fuente "Arial" para dibujar un texto de 30 píxeles de alto (hueco) en el lienzo:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

ctx.font = "30px Arial";

ctx.strokeText ("Hola mundo", 10,50);

Gradiente de lienzo

Los degradados se pueden rellenar en rectángulos, círculos, líneas, textos, etc., y se pueden definir varias formas con diferentes colores.

Hay dos formas diferentes de configurar el degradado del lienzo:

createLinearGradient ( x, y, x1, y1 ) -crea un gradiente de línea
createRadialGradient ( x, y, r, x1, y1, r1 ) -crea un gradiente radial / circular

Cuando usamos objetos degradados, debemos usar dos o más colores de parada.

El método addColorStop () especifica la parada de color y los parámetros se describen mediante coordenadas, que pueden ser de 0 a 1.

Para usar un degradado, establezca fillStyle o strokeStyle en un degradado y luego dibuje una forma como un rectángulo, texto o una línea.

使用 createLinearGradient ():

Ejemplo

Crea un degradado lineal. Rellena el rectángulo con un degradado:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d"); // Crea un degradado

var grd = ctx.createLinearGradient (0,0,200,0);

grd.addColorStop (0, "rojo");

grd.addColorStop (1, "white"); // Rellena el degradado

ctx.fillStyle = grd;

ctx.fillRect (10,10,150,80);

使用 createRadialGradient ():

Ejemplo

Crea un degradado radial / circular. Rellena el rectángulo con un degradado:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d"); // Crea un degradado

var grd = ctx.createRadialGradient (75,50,5,90,60,100);

grd.addColorStop (0, "rojo");

grd.addColorStop (1, "white"); // Rellena el degradado

ctx.fillStyle = grd;

ctx.fillRect (10,10,150,80);

Imagen de lienzo

Para colocar una imagen en el lienzo, utilice el siguiente método:

drawImage ( imagen, x, y )

Usa imágenes:

El grito

Ejemplo

Coloque una imagen en el lienzo:

JavaScript:

var c = document.getElementById ("myCanvas");

var ctx = c.getContext ("2d");

var img = document.getElementById ("grito");

ctx.drawImage (img, 10,10);