创建大地图时如何保持画布快速？答案

【问题标题】：How can I keep my canvas fast when creating a large map?创建大地图时如何保持画布快速？
【发布时间】：2013-02-28 17:03:22
【问题描述】：

我正在尝试使用 HTML5 和画布创建游戏。目前我正在使用 KineticJS 库。

到目前为止，我所做的事情是放大和缩小，从舞台内的图层拖动，以及从一些对象拖动。这一切都很好而且很快。

但是，游戏还需要一个景观，人们可以在其中建造房屋、粮田等。还需要一些树木和其他细节。这一切都让画布非常饱满。

为了进行测试，我制作了一个 10000 x 10000 像素的画布层，并将其制作成 100 x 100 的 100 x 100 像素的图块。只是这花了很多时间，甚至都没有加载。

所以我尝试使用较少的图块 (25 x 25) 并加载，但是当我尝试缩放、拖动舞台或拖动对象时，它非常非常慢，而且它都需要包含更多的对象.

所以主要问题是：任何人都可以向我咨询哪种方法最适合上述故事？画布是正确的选择，还是有其他（更好的）选择？

【问题讨论】：

标签： html performance canvas kineticjs

【解决方案1】：

10,000 x 10,000 像素的地图太大了。

从概念上讲，这很好。诀窍是不要保留/绘制整个事物！即，即使您的地图那么大，您也只能在角色周围绘制/更新 500 x 500 像素或任何视口的图块/对象.

请参阅 this post 和 Simon 的回答来实现这一点。

这里是与答案相关的example jsFiddle（完全归功于 Simon Sarris）。

【讨论】：

10,000 x 10,000 对于我正在尝试制作的游戏类型来说并不算大。该游戏将是一个定居者游戏，您可以在其中建立自己的“城市”以获取资源并组建军队。有了你的军队，你最终可以附着你的敌人。也许这更清楚了。您从 Simon Sarris 提供的示例将与我现在遇到相同的问题。只是因为我的画布中的元素数量。

【解决方案2】：

我找到了一个完美的解决方案！

我打算将画布与一些常规的 HTML （如 div）结合起来。我做了这个，它在这个 div 中创建了一个 15000x15000 像素的字段，我创建了 225 个新的 div，其中将包含画布对象。每个画布对象的大小为 100x100 像素。

总加载时间约为 4 秒，我将构建缩放，只用一些 javascript 和 div 拖动。

<!DOCTYPE HTML>
<html>
<head>

    <style>
        body,html {
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 15000px;
            height: 15000px;
        }
        .canvas{
            float: left;
            margin: 0px;
            padding: 0px;
            height: 1000px;
            width: 1000px;
        }
    </style>

    <script src="/js/jquery.js"></script>
    <script src="/js/kinetic.js"></script>

</head>
<body>
<div id="zoomer" style="position: absolute;"></div>
<div id="container">
    <?php for ($x = 1;$x<=15;$x++){?>
        <?php for ($y = 1;$y<=15;$y++){?>
            <div class="canvas" id="blok<?php echo $x;?>-<?php echo $y;?>"></div>
        <?php } ?>
    <?php } ?>
</div>
<script>
    var bk = {};
    $.each($(".canvas"),function(){

        var id = this.id;
        bk[id] = new Kinetic.Stage({
            container: this.id,
            width: 1000,
            height: 1000
        });

        var ly = new Kinetic.Layer();

        for(x = 0;x<10;x++){
            for(y = 0;y<10;y++){
                var r = Math.random();
                var g = Math.random();
                var b = Math.random();

                var tile = new Kinetic.Rect({
                    width: 100,
                    height: 100,
                    x: x * 100,
                    y: y * 100,
                    fill: "rgb("+ parseInt(255*r) +","+ parseInt(255*g) +","+ parseInt(255*b) +")"
                });
                ly.add(tile);
            }

        }
        ly.draw();

        bk[id].add(ly);

    });

</script>
</body>
</html>

无论如何，谢谢你的努力！

【讨论】：