如今许多游戏开发公司会接受这样的委托要求，游戏玩家通过移动鼠标或触摸点击画面中的特定区域，透过像图像之类的介质来到新的游戏界面，新世界。

       最新《植物大战僵尸2》的4张地图切换就是使用了这样的技术，直观上很容易理解，相当于一个文本超链接，原理差不多。

       游戏中每张地图右侧有个星星标志，有提示要求玩家获得一定数量星星才能解封。不知道你对这个游戏是否有独特兴趣，笔者着实玩的很有兴致。

       我们找到两个方法来完成需求，有各自的优缺点：

       context.clip HTML5 canvas方法

       第一种方法是使用一个canvas函数。这是通过定义一个路径,画一个形状,然后调用该方法。因此,任何图形都可以获得，直到你恢复画布。代码流:

context.save(); context.beginPath(); context.arc(); context.clip(); context.restore();

       裁剪之前必须保存画布内容以便恢复，接着描绘路径、裁剪、恢复。这是最基本的步骤，给出一种画圆的函数：

arc(x, y, radius, startAngle, endAngle, counterclockwise)

x, y  描述弧的圆形的圆心的坐标。
radius    描述弧的圆形的半径。
startAngle, endAngle    沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
counterclockwise   弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。

       呈现隐藏的场景

       创建好了场景和最好裁剪，然后添加触发事件，对canvas重新渲染，展现一个全新的场景，是不是很容易呢？

       优缺点：

       像HTML5其他方面一样各有利弊。首先是我们通过路径绘制，能够创造的图形十分受限制，图形一点复杂，那么在移动设备上运行将是无法想象的。

       经过测试，我们发现许多的GPU加速设备，有时会导致呈现问题。当然，你应该坚持html5游戏开发，毕竟不是一相短时间的工作，不要灰心。

       Destination-out

官方给出许多canvas组合操作，查看效果页：

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

       图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢，还是相互重叠的部分不显示等等，至于怎么显示就取决于type的值了。

type：

        source-over（默认值）:在原有图形上绘制新图形

        destination-over:在原有图形下绘制新图形

        source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

        destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

        source-out:只显示新图形非交集部分

        destination-out:只显示原有图形非交集部分

        source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

        destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

        lighter:原有图形和新图形都显示，交集部分做颜色叠加

        xor:重叠飞部分不现实

        copy:只显示新图形