首页 文章

在HTML5 Canvas中实现图层

提问于
浏览 次
23

我即将在HTML5 Canvas中实现类似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>

这种方式当你绘制到一个图层时 - 它实际上是"layer" . 可以在下面的图层（画布）中看到具有透明位置的图层 . 层堆叠由 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>

在上面的代码中，两层将每200毫秒改变堆叠顺序 .

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

javascript html5 canvas

4 回答

  • 2

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

    它使用损坏的rect系统来减少每次画布更改时重绘的次数，因此不仅可以获得图层（可以嵌套），还可以获得优化的重绘 .

    这是一个简单的演示：

    回复于
  • 26

    使用多个画布应该更快，因为画布会在屏幕外绘制，然后通过浏览器进入屏幕 . 你把交换图层的负担放在浏览器上，只需要移动一些图形数据矩形 .

    如果您自己进行分层，则可以获得更多控制权，但JS和JS引擎的负担是完成所有工作 . 如果我有一个选择，我会避免这种情况，但是如果你想要在底层使用的图层效果，这可能是你唯一的选择 .

    回复于
  • 21

    设置容器div相对应该已经阻止了该层覆盖问题 . 尝试在“被遮挡的文本”上设置位置 - 例如如果它目前是绝对的，它将显然与相对东西的左上角相同 .

    它可能是显而易见的，但是，按照html中div的顺序，你可以消除z轴的使用 . 如果你希望你的东西是通用的（对于其他开发人员也是如此），使用z轴但是存储你添加图层索引的基线（这样当使用其他代码以有问题的方式使用z轴时可以调整基线） .

    回复于
  • 1
    回复于

相关问题