/
draw2.html
50 lines (43 loc) · 1.42 KB
/
draw2.html
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
<html>
<body>
<canvas width="200px" height="200px"></canvas>
<canvas width="200px" height="200px" class="varying"></canvas>
<style type="text/css">
canvas { background: #eee; }
</style>
<script src="../fui.js"></script>
<script>
fui()
// only continue if the element matches the selector (uses qwery)
.filter('canvas')
// convert to relative coordinates
.relative()
// for each of the targets matched, push a context onto the argument list
.each(function(target) {
this.args.unshift(target.getContext('2d'));
})
// handle pointer down events
.down(function(context, target, x, y) {
this.state.down = true;
context.beginPath();
context.moveTo(x, y);
})
// handle pointer move events
.move(function(context, target, x, y) {
if (this.state.down) {
context.lineTo(x, y);
context.stroke();
}
})
// handle pointer up events
.up(function(context, target, x, y) {
this.state.down = false;
context.closePath();
});
fui()
.filter('canvas.varying')
.down(function(target) {
target.getContext('2d').lineWidth = Math.ceil(Math.random() * 5);
});
</script>
</body>