卡卡米的記憶體: HTML5 Canvas eraser demo using EaselJS

2012/3/9

HTML5 Canvas eraser demo using EaselJS

原理
html5 canvas 的橡皮擦怎麼作?
用context.globalCompositeOperation
根據Canvas Composite Operations Tutorial & Demo
我們知道只要寫

context.globalCompositeOperation = "destination-out"

就可以作出橡皮擦功能
但我們不直接用他
因為我們要透過 EaselJS 來操作 canvas
所以我們變成要寫

DisplayObject.compositeOperation = "destination-out";

demo

code

<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>

這是用 http://tohtml.com/ 貼code的功能，感覺還不錯

沒有留言:

張貼留言