no se pone cursor pointer a todos los elementos del canvas
Publicado por anonymous (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
0
