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;
}

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>

<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





También es necesario dominar el manejo de los ángulos y la trigonometría para dibujar círculos.





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>

<html>
<head>
<style>
canvas {
  border:2px solid #999;
  background-color:#000;
}
</style>
</head>
</br>
<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";
</br>
ctx.beginPath(); // draw 1
ctx.moveTo(30, 30);
ctx.lineTo(40, 10);
ctx.lineTo(40, 60);
ctx.stroke();
</br>
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.




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>

<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>

<html>
<head>
<style>
canvas {
  border:2px solid #999;
  background-color:#000;
}
</style>
</head>
</br>
<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();
</br>
/* 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();
</br>
ctx.beginPath();
ctx.arc(500, 105, 25, Math.PI/2, 2*Math.PI);
ctx.stroke();
</br>
/* A rectangle */
ctx.lineWidth="8";
ctx.strokeStyle="#69FFE7";
ctx.rect(20,20,660,160)
ctx.stroke();
</br>
</br>
</script>
</body>
</html>


Estas son las formas que aparecen:




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>

<html>
<head>
<style>
canvas {
  border:1px solid #999;
  background-color:#000;
}
</style>
</head>
</br>
<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");
</br>
/* A solid color rectangle */
ctx.lineWidth="2";
ctx.fillStyle="#316AC5";
ctx.fillRect(20,20,660,160)
</br>
/* 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();
</br>
</br>
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();
</br>
</br>
/* 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();
}
</br>
/* 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.




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>

<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!




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>

<html>
<head>
<style>
canvas {
  border:1px solid #999;
  background-color:#fff;
}
</style>
</head>
</br>
<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);
</br>
/* Rotate an eighth of a turn */
ctx.rotate(Math.PI/4);
ctx.fillText("How to draw with JavaScript",10,50);
</br>
/* 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!



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.

Descargar software

Cómo dibujar en el navegador con JavaScript

El objeto lienzo HTML

Líneas de dibujo

Dibujar formas

Modos de llenado

Escribir texto

Posición del texto

Transformaciones y rotaciones