canvas-node-tree/example.html at master · treydavis/canvas-node-tree · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <title>canvas-node-tree example</title>
</head>
<body>
    <canvas id='canvas' width='300' height='300'></canvas>
    <button id='pause-button'>Pause</button>
    <script src="./nodetree.js"></script>
    <script>
        var img = new Image()
        img.src = 'http://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png'

        var sprite1 = {
            skewX: 0.1,
            scaleX: 0.3, scaleY: 0.3,
            update: function(delta) {
                this.x += 6*delta
            },
            draw: function(context) {
                context.drawImage(img, 0, 0)
            }
        }
        sprite1.__proto__ = nodetree.NodePrototype

        var sprite2 = {
            scaleX: 0.3, scaleY: 0.3,
            update: function(delta) {
                this.rotation += 0.1*delta
            },
            draw: function(context) {
                context.drawImage(img, 0, 0)
            }
        }
        sprite2.__proto__ = nodetree.NodePrototype

        var rootNode = {
            children: [sprite2, sprite1]
        }
        rootNode.__proto__ = nodetree.NodePrototype

        nodetree.start('canvas', rootNode)

        document.getElementById('pause-button').onclick = function() {
            nodetree.paused = !nodetree.paused
        }
    </script>
</body>
</html>