En esta ocasión he querido compartir un script de Javascript para dibujar con el ratón o el dedo, al más estilo Paint (salvando las distancias). Simula el efecto de pintan en un lienzo que es compatible tanto con el cursor como pantallas táctiles (smartphones, celulares o móviles). Sin depender de ninguna librería externa (como puede ser JQuery), solo Javascript Vainilla y la etiqueta canvas.
He dejado comentarios para explicar como funciona, pero si buscas una explicación rápida te puedo decir que básicamente crea vectores en cada línea, por lo que teóricamente se visualizarás con una calidad excelente.
Demo
Pulsa dentro del cuadro negro para dibujar.
HTML
Declaramos nuestra etiqueta canvas, donde se dibujará las líneas.
<canvas id="pizarra"></canvas>
CSS
Le damos un tamaño y un color.
canvas {
width: 500px;
height: 500px;
background-color: #0D0909;
}
Javascript
Es muy importante que miCanvas.width y miCanvas.height tenga el mismo tamaño que los declarados en el CSS, sino la línea se saldrá del lienzo. Y cuidado con los porcentajes, canvas no los entiende.
//======================================================================
// 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 = 500;
miCanvas.height = 500;
//======================================================================
// 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);
Completo
Todo lo anterior unido quedaría de la siguiente forma.
<style>
canvas {
width: 500px;
height: 500px;
background-color: #0D0909;
}
</style>
<canvas id="pizarra"></canvas>
<script>
//======================================================================
// 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 = 500;
miCanvas.height = 500;
//======================================================================
// 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);
</script>
{{ comments.length }} comentarios