求教一个角色行走时,地图适配屏幕的问题

先上编辑器的图吧

我选择的适配方式是fitWidth和fitHeight同时勾上,目的是想当浏览器的宽度比游戏设计宽度大的时候,游戏的宽高比不变,这样浏览器的两边会出现黑边(这就是我想要的效果)

然而,发布成h5后,效果是下面这样的
1、当浏览器宽度较大时

这时候,因为地图宽度比canvas宽度更大,会看到canvas以外的地图部分,如上图红色框的部分,我的期望是不要显示红色框那部分的地图,以黑边来代替就好

2、当浏览器宽度较小时


这时候,上下会突出来一部分的地图,我的期望依然是不要显示红色框部分的,就让它出现黑边就好

最后上传个demo,期待大神指教,我该怎么做才能达到我想要的效果
cameraTest.rar (1.6 MB)

加一个遮罩组件不就好了

具体往哪里加?demo里有源码,能贴一下图吗?

地图精灵 做Mask的子节点

我试过这种做法,会出现部分地图显示不出来的问题,不知道是不是跟我摄像头动态移动了有关