Cómo borrar el lienzo en JavaScript
Esta publicación tiene los siguientes resultados:
- Cómo usar el método ClearRect () para borrar el lienzo en JavaScript?
- Borrar la parte específica del lienzo en JavaScript
- Borrar la parte completa del lienzo en JavaScript
Cómo usar el método ClearRect () para borrar el lienzo en JavaScript?
En JavaScript, el ClearRect () El método se utiliza para borrar la parte total o específica del lienzo. Junto con este método, debe recuperar el elemento de lona a través de su clase o la identificación. Primero, echemos un vistazo a la sintaxis del método ClearRect ():
Sintaxis
ClearRect (x, y, ancho, altura);Los parámetros del ClearRect () El método es el siguiente:
- X: Especifica la coordenada X de la esquina superior izquierda del rectángulo.
- Y Especifica la coordenada y de la esquina superior izquierda del rectángulo.
- ancho: representa el ancho del rectángulo para despejar (píxeles).
- altura: Representa la altura del rectángulo para despejar (píxeles).
Ejemplo 1: Borre la parte específica del lienzo en JavaScript
Se considera un ejemplo empleando el ClearRect () Método para eliminar elementos específicos en la ventana del navegador. El siguiente código se separa y se explica como Html y Javascript partes.
código HTML
Ejemplo a la porción específica Clare lienzo
La explicación del código es la siguiente:
- A lienzo El elemento se crea con "ID = Can" teniendo ancho = "500" y altura = "350".
- Se adjunta un archivo JavaScript al pasar el nombre del archivo "prueba.JS " hacia SRC atributo.
Código JavaScript
var c = documento.getElementById ("Can");var ctx = c.getContext ("2d");
CTX.relleno = "negro";
CTX.Fillrect (0, 0, 500, 350);
CTX.ClearRect (250, 100, 100, 100);
En este código:
- En primer lugar, el getElementById () El método extrae el elemento de lienzo.
- Después de eso, el getContext () El método se utiliza para extraer el contexto de dibujo para mostrar en lienzo.
- Además, el Fillreact () El método dibuja un rectángulo relleno pasando ancho y altura argumentos.
- Al final, ClearReact () elimina los píxeles en el rectángulo especificado.
Producción
La salida muestra que una porción específica que está presente en el centro del lienzo se borra en la ventana del navegador.
Ejemplo 2: borrar el lienzo completo en JavaScript
Se considera un método para borrar todos los elementos de lienzo presionando el botón en JavaScript. Inicialmente, se coloca una representación gráfica en el lienzo. Después de eso, el ClearRect () Se emplea el método para borrar la parte completa del lienzo.
Considerando el ClearRect () Método, la pieza de código se divide en archivos HTML y JavaScript.
código HTML
Presione el botón para borrar el rectángulo de lienzo
En este código:
- Se crea un elemento de lona asignando "ancho" de "300" y "altura" de "180" dimensiones.
- Después de eso, se adjunta un botón cuyo valor "Barriar el botón".
- Al final, el archivo de código JavaScript "prueba.JS " está vinculado con el archivo html dentro etiquetas.
Código JavaScript
Var Canvas = documento.getElementByid ('mycan');contexto var = lienzo.getContext ('2d');
contexto.beginPath ();
contexto.Rect (18, 50, 200, 100);
contexto.relleno = "negro";
contexto.llenar();
contexto.lineWidth = "20";
contexto.ataque();
documento.getElementById ('claro').addEventListener ('Click', function ()
contexto.ClearRect (0, 0, lienzo.Ancho, lienzo.altura);
, FALSO);
La explicación del código está escrita aquí:
- El GetElementByID ('Mycan') se utiliza para extraer el elemento de lona pasando una discusión.
- Después de eso, el "2d" se pasa para dibujar una imagen en una superficie bidimensional utilizando el getContext () método.
- Además, el contexto.reaccionar() crea un rectángulo especificando el altura y anchos.
- El estilo relleno la propiedad se utiliza para especificar el color.
- Después de eso, el llenar() El método se emplea para llenar el color en un rectángulo.
- Al final, el contexto.ClearReact () El método se utiliza para borrar el lienzo pasando el ancho y la altura.
Producción
La salida devuelve un lienzo de color negro que se borra presionando el "Barriar el botón" en la ventana.
Conclusión
En JavaScript, ClearRect () Proporciona una característica para borrar los elementos de lona especificando la altura y el ancho. Esta publicación ha explicado el trabajo y el uso del método ClearRect () para borrar el lienzo en JavaScript. Para una mejor comprensión, se consideran dos ejemplos para eliminar las partes específicas y eliminar todas las partes del lienzo. El método es beneficioso para volver a dibujar, trazar y animaciones en el lienzo.