Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (borrar una región)





Para borrar un rectángulo del lienzo debemos utilizar el método clearRect. Los parámetros son similares al método fillRect, es decir x,y,ancho y largo.


Confeccionaremos un programa que dibuje un cuadrado rojo de 300 píxeles de lado y luego borraremos tres cuadraditos en la diagonal principal del cuadrado rojo:



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(0,0,300,300);
lienzo.clearRect(10,10,20,20);
lienzo.clearRect(140,140,20,20);
lienzo.clearRect(270,270,20,20);
}
}
</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Como podemos ver primero dibujamos el cuadrado rojo y seguidamente llamamos tres veces a clearRect con las coordenadas respectivas:



lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(0,0,300,300);
lienzo.clearRect(10,10,20,20);
lienzo.clearRect(140,140,20,20);
lienzo.clearRect(270,270,20,20);








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9671
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados