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 (dibujar rectángulo - perímetro)





Para dibujar rectángulos disponemos del método strokeRect. Dispone de cuatro parámetros, los dos primeros indican la columna y fila inicial del rectángulo y los otros dos representan el ancho y alto en píxeles.

El método strokeRect es afectado por la propiedad strokeStyle. Solo se pinta el perímetro del rectángulo indicado.


Dibujaremos un rectángulo ubicado en la columna 50 y fila 10 con un ancho de 200 píxeles y 100 píxeles de altura:



<!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.strokeStyle = "rgb(0,0,255)";
lienzo.strokeRect(50,10,200,100);
}
}
</script>

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

Activamos el color azul y dibujamos inmediatamente el rectángulo:



lienzo.strokeStyle = "rgb(0,0,255)";
lienzo.strokeRect(50,10,200,100);









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

  • Medallas
  • 0
    Favoritos
  • 9715
    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