]>
Commit | Line | Data |
---|---|---|
f272267b JM |
1 | window.onload = init; |
2 | ||
3 | var img = null; | |
4 | var c_x = 0; | |
5 | var c_y = 0; | |
6 | var c_wx = 0; | |
7 | var c_wy = 0; | |
8 | ||
9 | function debug(str) { | |
10 | cell = $('debug'); | |
11 | cell.innerHTML += str + "\n"; | |
12 | cell.scrollTop = cell.scrollHeight; | |
13 | } | |
14 | ||
15 | function dirObj(obj, parent, depth) { | |
16 | var msg = ""; | |
17 | if (! depth) { depth=0; } | |
18 | if (! parent) { parent= ""; } | |
19 | ||
20 | // Print the properties of the passed-in object | |
21 | for (var i in obj) { | |
22 | if ((depth < 2) && (typeof obj[i] == "object")) { | |
23 | // Recurse attributes that are objects | |
24 | msg += dirObj(obj[i], parent + "." + i, depth+1); | |
25 | } else { | |
26 | msg += parent + "." + i + ": " + obj[i] + "\n"; | |
27 | } | |
28 | } | |
29 | return msg; | |
30 | } | |
31 | ||
32 | function mouseDown(e) { | |
33 | evt = e.event || window.event; | |
34 | e.stop(); | |
35 | debug('mouse ' + evt.which + '/' + evt.button + ' down:' + | |
36 | (evt.clientX - c_x) + "," + (evt.clientY - c_y)); | |
37 | } | |
38 | ||
39 | function mouseUp(e) { | |
40 | evt = e.event || window.event; | |
41 | e.stop(); | |
42 | debug('mouse ' + evt.which + '/' + evt.button + ' up:' + | |
43 | (evt.clientX - c_x) + "," + (evt.clientY - c_y)); | |
44 | } | |
45 | ||
46 | function keyDown(e) { | |
47 | e.stop(); | |
48 | debug("keydown: " + e.key + "(" + e.code + ")"); | |
49 | } | |
50 | ||
51 | function keyUp(e) { | |
52 | e.stop(); | |
53 | debug("keyup: " + e.key + "(" + e.code + ")"); | |
54 | } | |
55 | ||
56 | function ctxDisable(e) { | |
57 | evt = e.event || window.event; | |
58 | /* Stop propagation if inside canvas area */ | |
59 | if ((evt.clientX >= c_x) && (evt.clientX < (c_x + c_wx)) && | |
60 | (evt.clientY >= c_y) && (evt.clientY < (c_y + c_wy))) { | |
61 | e.stop(); | |
62 | return false; | |
63 | }; | |
64 | } | |
65 | ||
66 | ||
67 | function init() { | |
68 | debug(">> init"); | |
69 | ||
70 | c = $('tutorial'); | |
71 | c.addEvent('mousedown', mouseDown); | |
72 | c.addEvent('mouseup', mouseUp); | |
73 | document.addEvent('keydown', keyDown); | |
74 | document.addEvent('keyup', keyUp); | |
75 | ||
76 | /* Work around right and middle click browser behaviors */ | |
77 | document.addEvent('click', ctxDisable); | |
78 | document.body.addEvent('contextmenu', ctxDisable); | |
79 | ||
80 | c_x = c.getPosition().x; | |
81 | c_y = c.getPosition().y; | |
82 | c_wx = c.getSize().x; | |
83 | c_wy = c.getSize().y; | |
84 | ||
85 | //var canvas = document.getElementById('tutorial'); | |
86 | if (! c.getContext) return; | |
87 | var ctx = c.getContext('2d'); | |
88 | ||
89 | /* Border */ | |
90 | ctx.stroke(); | |
91 | ctx.rect(0, 0, 500, 300); | |
92 | ctx.stroke(); | |
93 | ||
94 | /* | |
95 | // Does not work in firefox | |
96 | var himg = new Image(); | |
97 | himg.src = "head_ani2.gif" | |
98 | ctx.drawImage(himg, 10, 10); | |
99 | */ | |
100 | ||
101 | /* Test array image data */ | |
102 | img = ctx.createImageData(50, 50); | |
103 | for (y=0; y< 50; y++) { | |
104 | for (x=0; x< 50; x++) { | |
105 | img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y); | |
106 | img.data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y); | |
107 | img.data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x); | |
108 | img.data[(y*50 + x)*4 + 3] = 255; | |
109 | } | |
110 | } | |
111 | ctx.putImageData(img, 100, 100); | |
112 | ||
113 | debug("<< init"); | |
114 | } | |
115 |