test/incremental.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Incremental Rendering</title>
    <script src="../dist/zrender.js"></script>
</head>
<body style="margin:0px;">
    <canvas id="main" width="1000px" height="600px" style="width:1000px;height:600px;"></canvas>
    <script type="text/javascript">
        var zr = zrender.init(document.getElementById('main'));

        zr.add(new zrender.Rect({
            shape: {
                x: 0,
                y: 0,
                width: zr.getWidth(),
                height: zr.getHeight()
            },
            style: {
                fill: 'red'
            }
        }));

        var incrementalDisplayable = new zrender.IncrementalDisplayable();
        zr.add(incrementalDisplayable);

        var countText = new zrender.Text({
            style: {
                text: 0,
                x: 10,
                y: 10,
                textFont: '40px sans-serif',
                textFill: '#fff',
                textStroke: '#000',
                textStrokeWidth: 2
            }
        });
        zr.add(countText);

        zr.animation.on('frame', function ()  {
            for (var i = 0; i < 2000; i++) {
                var circleShape = new zrender.Circle({
                    shape: {
                        r: 1 + Math.random() * 1
                    },
                    style: {
                        fill: '#121',
                        blend: 'lighter'
                    },
                    position: [Math.random() * zr.getWidth(), Math.random() * zr.getHeight()]
                });
                incrementalDisplayable.addDisplayable(circleShape, true);
            }

            countText.style.text += 2000;
            countText.dirty();
        });

        setInterval(function () {
            incrementalDisplayable.clearDisplaybles();
        }, 5000);
    </script>
</body>
</html>