Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             







 
 
 

Cómo dibujar en el navegador con JavaScript

 
HTML5 introdujo el objeto canvas que permite dibujar en el navegador con JavaScript. Canvas se utiliza básicamente para mostrar gráficos, pero incluso es posible crear juegos en 3D.
En este artículo, veremos cómo dibujar líneas, formas simples, cómo rellenarlas y orientarse en el área de dibujo.

 

El objeto lienzo HTML

 

La palabra canvas significa canevas. Está por tanto muy orientada a la creación gráfica y artística. Simplemente se declara mediante la etiqueta canvas y se comporta en pantalla como un div.
Definamos un estilo para todos los lienzos de nuestro artículo:

canvas {
  border:2px solid #999;
  background-color:#fff;
}

Vamos a crear nuestro primer lienzo:

<canvas id="canvas1" width="800" height="300">Your browser is too old</canvas>

The location in the canvas is done by Cartesian coordinates (x, y) with the origin (0, 0) at the top left

 
Cómo dibujar en el navegador con JavaScript
 

También es necesario dominar el manejo de los ángulos y la trigonometría para dibujar círculos.
 
Cómo dibujar en el navegador con JavaScript
 

 

Líneas de dibujo

 

<html>
<head>
<style>
canvas {
  border:2px solid #999;
  background-color:#000;
}
</style>
</head>


<body>
<canvas id="canvas1" width="700" height="200">Your browser is too old</canvas>
<script>
var myCanvas=document.getElementById("canvas1");
var ctx = myCanvas.getContext("2d");
ctx.lineWidth="8";
ctx.strokeStyle="#fff";


ctx.beginPath(); // draw 1
ctx.moveTo(30, 30);
ctx.lineTo(40, 10);
ctx.lineTo(40, 60);
ctx.stroke();


ctx.beginPath(); // draw 2
ctx.moveTo(80, 80);
ctx.lineTo(60, 80);
ctx.lineTo(60, 60);
ctx.lineTo(80, 60);
ctx.lineTo(80, 40);
ctx.lineTo(60, 40);
ctx.stroke();
</script>
</body>
</html>

  y 2 se muestran en tiempo de ejecución.
 
Cómo dibujar en el navegador con JavaScript
 

Algunas explicaciones simples para comprender los principios fundamentales del dibujo sobre lienzo son esenciales:
Clásicamente, buscamos el lienzo con getElementById() que informa la variable myCanvas.
La variable ctx es alimentada por la llamada al método específico de objeto getContext() HTMLCanvasElement.
Luego, todas las acciones de dibujo en el lienzo pasan por llamadas a métodos y asignaciones de propiedades en este contexto.
La propiedad lineWidth contiene el ancho del lápiz.

La propiedad strokeStyle contiene el color del lápiz.
El método beginPath() inicializa un gráfico.
El método moveTo(x, y) mueve el puntero a la posición (x, y).
El método lineTo(x, y) dibuja una línea desde la posición del cursor hasta la posición (x, y).
El método stroke() muestra el dibujo vacío inicializado en el lienzo. Mientras no se llame a stroke(), no se muestra el dibujo de una ruta.


 

Dibujar formas

 
La gestión de formularios es bastante extensa
<canvas id="canvas2" width="650" height="300">Your browser is too old</canvas>

Some examples of drawing shapes:

<html>
<head>
<style>
canvas {
  border:2px solid #999;
  background-color:#000;
}
</style>
</head>


<body>
<canvas id="canvas2" width="700" height="200">Your browser is too old</canvas>
<script>
var myCanvas=document.getElementById("canvas2");
var ctx = myCanvas.getContext("2d");
/* A circle and an arc of a circle */
ctx.lineWidth="4";
ctx.strokeStyle="#fff";
ctx.beginPath();
ctx.arc(300, 105, 65, 0, 2*Math.PI);
ctx.stroke();


/* A closed path (a triangle) */
ctx.lineWidth="4";
ctx.strokeStyle="#D8FF69";
ctx.beginPath(); 
ctx.moveTo(60,60);
ctx.lineTo(190,35);
ctx.lineTo(50,160);
ctx.closePath(); 
ctx.stroke();


ctx.beginPath();
ctx.arc(500, 105, 25, Math.PI/2, 2*Math.PI);
ctx.stroke();


/* A rectangle */
ctx.lineWidth="8";
ctx.strokeStyle="#69FFE7";
ctx.rect(20,20,660,160)
ctx.stroke();




</script>
</body>
</html>

Estas son las formas que aparecen:
 
Cómo dibujar en el navegador con JavaScript
 

El método rect(x, y, ancho, alto) dibuja un rectángulo cuya esquina superior izquierda está en (x,y) con ancho y alto como dimensiones.

El método closePath() cierra una ruta abierta con beginPath().

 

Modos de llenado

 

Aquí están los 3 formularios para llenar
<html>
<head>
<style>
canvas {
  border:1px solid #999;
  background-color:#000;
}
</style>
</head>


<body>
<canvas id="canvas3" width="700" height="200">Your browser is too old</canvas>
<script>
var myCanvas=document.getElementById("canvas3");
var ctx = myCanvas.getContext("2d");


/* A solid color rectangle */
ctx.lineWidth="2";
ctx.fillStyle="#316AC5";
ctx.fillRect(20,20,660,160)


/* Two circles with color gradients */
var myGradient = ctx.createLinearGradient(215, 0, 270, 0);
myGradient.addColorStop(0, '#1B606B');
myGradient.addColorStop(1, '#ffffff');
ctx.fillStyle = myGradient;
ctx.beginPath();
ctx.arc(250, 105, 55, 2*Math.PI, 0);
ctx.fill();




myGradient = ctx.createRadialGradient(450, 80, 50, 450, 85, 2*Math.PI);
myGradient.addColorStop(0, '#ffa500');
myGradient.addColorStop(1, '#ffffff');
ctx.fillStyle = myGradient;
ctx.beginPath();
ctx.arc(450, 105, 55, 0, 2*Math.PI);
ctx.fill();




/* A shape defined by a path filled with an image */
var img = new Image();
img.src = 'pattern.png?1';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.beginPath();
  ctx.moveTo(500,60);
  ctx.lineTo(590,35);
  ctx.lineTo(600,160);
  ctx.lineTo(490,90);
  ctx.fill();
}


/* A dark square with transparency */
ctx.fillStyle = 'rgba(15, 15, 15, 0.3)';
ctx.fillRect(250, 5, 100, 100);
</script>
</body>
</html>



La propiedad fillStyle contiene el estilo de relleno. Este ejemplo muestra el caso de un color sólido, un degradado de color o un patrón resultante de una repetición de imagen.
El método fillRect dibuja un rectángulo relleno con el estilo definido en fillStyle.
 
Cómo dibujar en el navegador con JavaScript
 

El método fill() llena un camino con el estilo previamente definido. Debe estar relacionado con stroke() que traza los contornos de la ruta.
Los degradados de color son objetos CanvasGradient que representan degradados definidos con precisión a partir de una forma y colores. Canvas acepta 2 tipos de degradados.
El degradado lineal creado por createLinearGradient(x1, y1, x2, y2) define un vector entre los puntos (x1, y1) y (x2, y2). Este vector está coloreado por un degradado de colores agregado por addColorStop(number, colorCode).
El degradado circular creado por createRadialGradient(x1, y1, r1, x2, y2, r2) define 2 círculos con su posición y radio.
Los degradados requieren un poco de prueba y error para obtener el efecto deseado...
Finalmente, existe la posibilidad de llenar una forma con una imagen repetida, cuyo efecto es comparable a la propiedad background-url de CSS. La sutileza es que tienes que esperar a que cargue la imagen para poder crear el patrón con createPattern(). Esto fuerza la detección del evento onload en la imagen del objeto de JavaScript.


 

Escribir texto

 

Por supuesto, el lienzo permite mostrar texto de forma sencilla.

<canvas id="canvas1" width="700" height="200">Tu navegador es demasiado antiguo</canvas>

Aquí hay un ejemplo para escribir texto:
<html>
<head>
<style>
canvas {
  border:1px solid #999;
  background-color:#fff;
}
</style>
</head>
<body>
<canvas id="canvas3" width="700" height="200">Your browser is too old</canvas>
<script>
var myCanvas=document.getElementById("canvas3");
var ctx = myCanvas.getContext("2d");
ctx.font="50px arial";
ctx.strokeText("How to draw with JavaScript",10,50);
ctx.fillText("How to draw with JavaScript",10,110);
ctx.fillStyle="#79EEFF";
ctx.fillText("How to draw with JavaScript",10,170);
ctx.stroke();
</script>
</body>
</html>

¡Y aquí hay algunos ejemplos de estilos de texto!
 
Cómo dibujar en el navegador con JavaScript
 

font contiene propiedades de estilo de texto.
strokeText() muestra los contornos de las letras.
fillText() muestra el texto completo.

 

Posición del texto

 

measureText() devuelve el ancho en píxeles del texto ocupado en el lienzo. Estos datos le permiten posicionar el texto con mayor precisión.

De forma predeterminada, la posición del texto es la esquina inferior izquierda del cuadro de texto.
La propiedad textBaseline contiene el tipo de línea de soporte de texto. De forma predeterminada, el valor es alfabético con un texto que se basa en la línea principal de escritura.

 

Transformaciones y rotaciones

 

Hay una forma de realizar transformaciones antes de dibujar en el lienzo con setTransform() y rotate().
Aquí hay un ejemplo para rotar un texto verticalmente. Rápidamente se da cuenta de que el código necesario para realizar esta operación relativamente simple es largo y complejo. Crear una función parece realmente útil.
<html>
<head>
<style>
canvas {
  border:1px solid #999;
  background-color:#fff;
}
</style>
</head>


<body>
<canvas id="canvas4" width="700" height="200">Your browser is too old</canvas>
<script>
var myCanvas=document.getElementById("canvas4");
var ctx = myCanvas.getContext("2d");
ctx.font="30px arial";
/* Text without transformation */
ctx.fillText("How to draw with JavaScript",10,50);


/* Rotate an eighth of a turn */
ctx.rotate(Math.PI/4);
ctx.fillText("How to draw with JavaScript",10,50);


/* Display text vertically in position (280, 200) */
ctx.setTransform(1, 0, 0, 1, 280, 220);
ctx.rotate(3*Math.PI/2);
ctx.fillText("How to draw with JavaScript",0,0);
</script>
</body>
</html>

¡Y aquí hay algunos ejemplos de rotación de texto!
 
Cómo dibujar en el navegador con JavaScript
 
Por defecto la rotación se realiza en el punto (0, 0) del lienzo. Por lo tanto, es necesario utilizar los últimos 2 parámetros de setTransform() para traducir el punto de rotación.

También te puede interesar


Cómo hacer llamadas Ajax con XMLHTTPRequest

Cómo hacer Drag and Drop en HTML 5 y JavaScript API

Cómo copiar texto al portapapeles usando html, css y javascript

Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

Cómo capturar una foto desde una cámara usando Javascript


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...