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...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Llamada al API de diseño
Siguiente
Agregar color