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
<html>
<head>
    <title></title>
    <script type="text/javascript" src="../lib/easel.js"></script>
    <script type="text/javascript" src="../lib/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var canvas = $("#canvas")[0];
            var stage = new Stage(canvas);
            var shape1 = new Shape();
            var shape2 = new Shape();
            var color = "rgba(255,0,0,1)";
            shape1.graphics.setStrokeStyle(16, "round", "round")
                    .beginStroke(color)
                    .moveTo(100, 300)
                    .lineTo(300, 100)
                    .endStroke();
            shape2.graphics.setStrokeStyle(16, "round", "round")
                    .beginStroke(color)
                    .moveTo(100, 100)
                    .lineTo(300, 300)
                    .endStroke();
            shape2.compositeOperation = "destination-out";
            stage.addChild(shape1);
            stage.addChild(shape2);
            stage.update();
        });
    </script>
    </head>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>