JavaScript - no se pone cursor pointer a todos los elementos del canvas

   
Vista:
Imágen de perfil de Humberto

no se pone cursor pointer a todos los elementos del canvas

Publicado por Humberto (50 intervenciones) el 03/05/2017 03:37:42
hola si me pueden ayudar este es el codigo completo de mi proyecto
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Botones en canvas</title>
</head>
 
<body>
<canvas id="micanvas" width="1280" height="600">
	Tu Navegador no soporta Canvas.
	</canvas>
<script>
	function actualizar(){//se guarda la forma de las figuras
		limpiar()
		for(var i = 0; i < botones.length; i++){
			ctx.fillStyle = botones[i].color;
			ctx.fillRect(botones[i].x,botones[i].y, botones[i].w,botones[i].h);
		}
	}
	function limpiar(){
		ctx.fillStyle = "#3A3A3A";
		ctx.fillRect(0,0,canvas.width,canvas.height)
	}
	window.onload = function(){
		botones = new Array();// o new Array();
		canvas = document.getElementById("micanvas");
		ctx = canvas.getContext("2d");
		mover = new Boolean(false)
		click();
		botones.push({//es el primer boton :)
			x: 10,
			y: 10,
			w: 20,
			h: 20,
			color:"#f00"
		});
		botones.push({//es el segundo boton :)
			x: 100,
			y: 10,
			w: 20,
			h: 20,
			color:"#f00"
		});
		botones.push({//es el tercer boton :)
			x: 190,
			y: 10,
			w: 20,
			h: 20,
			color:"#f00"
		});
		triangulo = {
			x: 190,
			y: 10,
			w: 20,
			h: 20,
			color:"#f00"
		}
			actualizar();
	};
/*canvas.onmousedown=function(e){
	for(var i = 0; i < botones.length; i++){
		
	}
}*/
function click(){
	canvas.onmousemove = function(event){
		for(var l;l < botones.length; l++){
			if(event.pageY - canvas.offsetTop > botones[l].y &&
		       event.pageY - canvas.offsetTop < (botones[l].y + botones[l].h) &&
		       event.pageX - canvas.offsetLeft > botones[l].x &&
		       event.pageX - canvas.offsetLeft < (botones[l].x + botones[l].w)){
			 	this.style.cursor = "pointer";
				console.log(l)
			}
			else{
				this.style.cursor = "default";
			}
		}
	}
	canvas.onmouseout = function(){
		mover = false;
	}
	canvas.onmouseup = function(){
		mover = false;
	}
}
/*	function CanvasRenderingContext2D.button(x,y,width,height){
this.x = (x == null)?0:x;
this.y = (x == null)?0:y;
this.width = (width == null)?0:width;
his.height = (height == null)? this.width:height;
this.fillRect(x,y,width,height);
 this.onmousedown = function(event){
 var mousex = event.pageX - this.offsetLeft - this.scrollLeft,
     mousey = event.pageY - this.offsetTop - this.scrollTop;
     if(mousex > x && mousex < x + width && mousey > y && mousey < y + height){
         aqui se supone va la funcion del boton
     
     }
   }
}*/
 
	</script>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

no se pone cursor pointer a todos los elementos del canvas

Publicado por ScriptShow (489 intervenciones) el 05/05/2017 12:35:03
Saludos Humberto,

algo general relacionado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="800" height="600">
Tu Navegador no soporta Canvas.
</canvas>
<script>
canvas.onmousemove=function(e){
if (!e) var x=window.event.srcElement;
else var x=e.target;
x.style="cursor:pointer";
}
</script>
</body>
</html>

La forma simple sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="800" height="600">
Tu Navegador no soporta Canvas.
</canvas>
<script>
canvas.onmousemove=function(){
this.style="cursor:pointer";
}
</script>
</body>
</html>


P.D,; Para apuntar a elementos dentro del Canvas, Div, etc., puedes utilizar Parent y/o This.

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad