Sois creadores de dibujos, descubre la Pizarra de Dibujo, y demuestra tus habilidades. Se trata de un lienzo negro para dibujar lo que quieras.
Es un script para dibujar con el ratón en el ordenador, y de forma táctil en otros dispositivos electrónicos. Se construye sin depender de ninguna librería externa (como pueda ser jQuery), solo Javascript Vainilla y la etiqueta Canvas. Crea tus dibujos a mano alzada, con esta Pizarra de Dibujo.
Haz clic dentro del cuadro para dibujar
Puedes ver también como funciona un Editor de Firma Digital más completo, en el siguiente enlace
La captura de la firma para documentos es ya una realidad en múltiples sectores: correos, paquetería, supermercados, notarías, etc. Con un módulo de firma digital, sus procesos de captura de firma quedan reducidos a un único trabajo: QUE EL CLIENTE FIRME LA TABLETA DE CAPTURA DE FIRMA.
HTML
Declaramos nuestra etiqueta canvas, donde se dibujarán las líneas.
<canvas id="pizarra"></canvas>
CSS
Le damos un tamaño y un color.
canvas {
width: 1200px;
height: 1200px;
background-color: #1E24FF;
}
Javascript
Es importante que miCanvas.width y miCanvas.height tengan el mismo tamaño que los declarados en el CSS, sino la línea se saldrá del lienzo.
//======================================================================
// VARIABLES
//======================================================================
let miCanvas = document.querySelector('#pizarra');
let lineas = [];
let correccionX = 0;
let correccionY = 0;
let pintarLinea = false;
// Marca el nuevo punto
let nuevaPosicionX = 0;
let nuevaPosicionY = 0;
let posicion = miCanvas.getBoundingClientRect()
correccionX = posicion.x;
correccionY = posicion.y;
miCanvas.width = 1200;
miCanvas.height = 1200;
//======================================================================
// FUNCIONES
//======================================================================
/**
* Funcion que empieza a dibujar la linea
*/
function empezarDibujo() {
pintarLinea = true;
lineas.push([]);
};
/**
* Funcion que guarda la posicion de la nueva línea
*/
function guardarLinea() {
lineas[lineas.length - 1].push({
x: nuevaPosicionX,
y: nuevaPosicionY
});
}
/**
* Funcion dibuja la linea
*/
function dibujarLinea(event) {
event.preventDefault();
if (pintarLinea) {
let ctx = miCanvas.getContext('2d')
// Estilos de linea
ctx.lineJoin = ctx.lineCap = 'round';
ctx.lineWidth = 10;
// Color de la linea
ctx.strokeStyle = '#fff';
// Marca el nuevo punto
if (event.changedTouches == undefined) {
// Versión ratón
nuevaPosicionX = event.layerX;
nuevaPosicionY = event.layerY;
} else {
// Versión touch, pantalla tactil
nuevaPosicionX = event.changedTouches[0].pageX - correccionX;
nuevaPosicionY = event.changedTouches[0].pageY - correccionY;
}
// Guarda la linea
guardarLinea();
// Redibuja todas las lineas guardadas
ctx.beginPath();
lineas.forEach(function (segmento) {
ctx.moveTo(segmento[0].x, segmento[0].y);
segmento.forEach(function (punto, index) {
ctx.lineTo(punto.x, punto.y);
});
});
ctx.stroke();
}
}
/**
* Funcion que deja de dibujar la linea
*/
function pararDibujar () {
pintarLinea = false;
guardarLinea();
}
//======================================================================
// EVENTOS
//======================================================================
// Eventos raton
miCanvas.addEventListener('mousedown', empezarDibujo, false);
miCanvas.addEventListener('mousemove', dibujarLinea, false);
miCanvas.addEventListener('mouseup', pararDibujar, false);
// Eventos pantallas táctiles
miCanvas.addEventListener('touchstart', empezarDibujo, false);
miCanvas.addEventListener('touchmove', dibujarLinea, false);
Para llevar esta Pizarra de Dibujo a tu sitio web, haz clic en el enlace de abajo.