javascript – 在HTML5画布中实现图层

我即将在HTML5画布中实现Photoshop般的图层。目前我有两个想法。第一个也许更简单的想法是为每个图层设置一个Canvas元素,如:

<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>

这样当你画到一个图层 – 它实际上是去“层”。具有透明位置的层可以通过下面的层(Canvases)看到。层叠叠由z-index属性控制。

第二个想法是使用单个Canvas元素并实现一些逻辑来处理像这样的层:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script>
            window.addEventListener('load', function() {
                var canvas = document.getElementById("canvas");  
                var ctx = canvas.getContext("2d");  

                var order = 0;

                function drawLayer1() {
                    ctx.fillStyle = "rgb(200,0,0)";
                    ctx.fillRect (10, 10, 55, 50);
                }

                function drawLayer2() {
                    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
                    ctx.fillRect (30, 30, 55, 50);
                }

                function draw() {
                    ctx.clearRect(0, 0, 256, 256);

                    if (order === 0) {
                        drawLayer1();
                        drawLayer2();
                    }
                    else {
                        drawLayer2();
                        drawLayer1();
                    }
                }

                setInterval(draw, 250);
                setInterval(function() {
                    order = 1 - order;
                }, 200);
            }, false);
        </script>
    </head>
    <body>
        <canvas id="canvas" width="256px" height="256px"></canvas>
    </body>
</html>

在上面的代码中,两层将每隔200ms更改堆叠顺序。

那么问题是哪个方式是最好的方法?这两种方法的优点和缺点是什么?

如果要使用单个canvas元素并在其中包含多个图层,则可能需要查看我的库:

> http://bitbucket.org/ant512/canvaslayers/

它使用损坏的直角系统来减少每次画布改变完成的重绘量,因此不仅可以获取图层(可以嵌套),还可以优化重画。

这是一个简单的演示:

> http://simianzombie.com/media/2010/11/canvaslayers/canvaslayers.html

http://stackoverflow.com/questions/4422907/implementing-layers-in-html5-canvas

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 在HTML5画布中实现图层