Índice

Diseñar un rectángulo

Antes de pasar al código relativo al diseño, es preciso conocer la notación que se utiliza para definir las coordenadas.

images/11RI03.png

El origen de los ejes x e y se sitúa en la esquina superior izquierda [coordenadas (0,0)]. Todos los elementos del área de dibujo se definen en relación con este punto de origen de coordenadas. De este modo, la esquina superior izquierda del cuadrado de color azul se sitúa a x píxeles horizontales desde la izquierda e y píxeles verticales desde arriba [coordenadas (x,y)].

Un rectángulo completo se define mediante la función: fillRect(x,y,width,height).

Ejemplo

Diseñemos un rectángulo que tenga la esquina superior izquierda a 25 píxeles del borde izquierdo y a 25 píxeles del borde superior. Nuestro rectángulo tendrá además una anchura (width) de 150 píxeles y una altura (height) de 100 píxeles.

<!DOCTYPE html> 
<html lang="es"> 
<head> 
   <title>Html5</title> 
   <meta charset="UTF-8"> 
</head> 
<body> 
<canvas id="dibujo" width="200px" height="200px" style="border: 1px 
solid black"> 
Su navegador no soporta la etiqueta canvas. 
</canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById("dibujo"); 
var contexto = canvas.getContext("2d");  ...