-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBlackboard.html
130 lines (113 loc) · 3.34 KB
/
Blackboard.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pizarra, código limpio.</title>
</head>
<body>
<style>
canvas {
width: 500px;
height: 500px;
background-color: #0D0909;
}
</style>
<canvas id="pizarra"></canvas>
<script>
// Código demostrativo limpio, provisto por Andros Fenollosa, el día: 02/12/2018
// bajo Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional
//======================================================================
// 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) {
if (segmento[0] != null) {
ctx.moveTo(segmento[0].x, segmento[0].y);
segmento.forEach(function(punto, index) {
ctx.lineTo(punto.x, punto.y);
});
} else {
ctx.stroke();
}
});
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);
miCanvas.addEventListener('touchend', pararDibujar, false);
</script>
</body>
</html>