mojombo / primer

Primer is a Flash-like API built on top of Canvas using jQuery.

primer / test / test.html
100644 65 lines (52 sloc) 1.684 kb
raw blame history 
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Primer Test</title>
    <script src="./jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="../primer.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        // var el = $('#p1').get(0)
        var el = "#p1"
        
        p1 = new Primer(el, 300, 300)
        
        var hold = new Primer.Layer()
        hold.fillRect(0, 0, 2, 2)
        hold.x = 20
        hold.y = 20
        p1.addChild(hold)
        
        var box = new Primer.Layer()
        box.fillRect(0, 0, 10, 10)
        box.visible = false
        
        p1.addChild(box)
        
        var square = new Primer.Layer()
        square.strokeStyle = "#00FF00"
        square.fillStyle = "#FF0000"
        square.beginPath()
        square.moveTo(0, 0)
        square.lineTo(20, 0)
        square.lineTo(0, 20)
        square.fill()
        
        square.x = 50
        square.y = 50
        
        hold.addChild(square)
        
        
        square.mouseover(function() {
          box.visible = true
        })
        
        square.mouseout(function() {
          box.visible = false
        })
        
        function go() {
          square.x += 1
          square.visible = !square.visible
        }
        
        // setInterval(go, 100)
      })
    </script>
  </head>
  <body>
    <p>Testing</p>
    <div id="p1"></div>
  </body>
</html>