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

Versión 1.0
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 13 de Julio del 2017gráfica de visualizaciones de la versión: Versión 1.0
10.668 visualizaciones desde el 13 de Julio del 2017
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 (3)

Imágen de perfil
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
Alberto
2 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
una pregunta amigo se podría usar el canvas para paginas orientadas a MVC es que solo se cuenta con un body y si se desean poner mas canvas no abría problema?
Responder
Orlando
24 de Agosto del 2019
estrellaestrellaestrellaestrellaestrella
Excelente! es un buen aporte, gracias amigo :)
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4068