Código de JavaScript - Dibujar a mano alzada con Canvas

Imágen de perfil

Dibujar a mano alzada con Canvasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 13 de Julio del 2017 por Administrador
2.839 visualizaciones desde el 13 de Julio del 2017. Una media de 56 por semana
Este código de javascript, muestra como dibujar en Canvas con el ratón

dibujar-a-mano-alzada

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 14 de Julio del 2017 (Publicado el 13 de Julio del 2017)gráfica de visualizaciones de la versión: Versión 1.0
2.849 visualizaciones desde el 13 de Julio del 2017. Una media de 56 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella


Forma parte de El club del programador
 
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
<html>
<head>
<style>
.drop-shadow {
	margin:2em 20% 4em;
}
canvas {
	border-style:solid;
	border-color:#000000;
	border-radius:5px;
	border-width:1px;
}
</style>
<title>Paint con HTML5</title>
</head>
 
<body onload="prepareCanvas();">
	<canvas id="canvasEjemplo" width="800" height="600"></canvas>
	<br><input type="button" id="borrador" value="Borrar Todo" />
 
	<script>
 
	var miLienzo; // el canvas
	var contexto; // el contexto
	var canvasLimites; // los margenes del canvas
	var flagPaint=false; // nos dice si pintar o no
	var actualPos; // la posición actual donde hice click
 
	function prepareCanvas(){
		miLienzo=document.getElementById("canvasEjemplo");
		contexto= miLienzo.getContext("2d"); // obtenemos el contexto ( dibujar en 2d)
		canvasLimites=miLienzo.getBoundingClientRect(); // obtenemos los limites del canvas
		miLienzo.addEventListener('mousedown',cambiarEstado,false);
		miLienzo.addEventListener('mouseup',cambiarEstado,false);
		miLienzo.addEventListener('mousemove',pintarLinea,false);
		miLienzo.style.cursor="hand";
 
		borrador=document.getElementById("borrador");
		borrador.addEventListener('click',erase,false);
	}
 
	function cambiarEstado(){
		flagPaint=!flagPaint;
		actualPos=obtenerCoordenadas(event);
	}
 
	function pintarLinea(event){
 
		if(flagPaint){
			var coordenadas=obtenerCoordenadas(event);
			contexto.beginPath(); // comenzamos a dibujar
			contexto.moveTo(actualPos.x, actualPos.y); // ubicamos el cursor en la posicion (10,10)
			contexto.lineTo(coordenadas.x,coordenadas.y);
			actualPos={
				x:coordenadas.x,
				y:coordenadas.y
			};
			contexto.strokeStyle = "#000"; // color de la linea
			contexto.stroke(); // dibujamos la linea
		}
	}
 
	function obtenerCoordenadas(event){
		var posX;
		var posY;
 
		if (event.pageX || event.pageY) {
			posX = event.pageX- canvasLimites.left;
			posY = event.pageY- canvasLimites.top;
		}else{
			posX = event.clientX - canvasLimites.left;
			posY = event.clientY - canvasLimites.top;
		}
 
		return {x:posX,
			y:posY
		};
	}
	function erase(){
		contexto.clearRect(0, 0, miLienzo.width, miLienzo.height);
	}
 
	</script>
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
miguel
15 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
muy bueno amigo, kiza le retoke un poco y le emplee para un proyecto.
de ser así te lo haré saber para ver tu opinión.
buen dia
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4068  
Revisar política de publicidad