在做新手引导挖洞的时候参考了Laya官方的教程用到了 cacheAs="bitmap" 这个属性但是我相信很多人都遇到了如果宽度或者高度超过 2048 的话 cacheAs 就会失败导致蒙版消失不显示，但是说实话我做的时候已经很接近2048,，但是宽和高都没有超过 2048的时候，蒙版就已经消失了！我很郁闷，并且相信肯定还有人也是跟我一样有这样的需求所以我研究了一下并分享出来如何挖洞！不用cacheAs方法

    <div id="div1" style="position:absolute;left:0px;top:0px"><canvas id="canvas"></canvas></div>
    <script type="text/javascript">
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        /////////////////////////////////////////////////// 注意本程序没有处理横屏显示 ///////////////////////////////////////////////////
        //我没有用画图API去画形状，用的是图片因为我要清楚地看到图片重绘以及挖洞之后是否与LayaAir进行了正确的屏幕适配，如果你想用画图API请自行参考//
        //////////////////////////// 下面程序中如果有看不懂的地方请你耐心地看结合下面的参考地址多想想你就能看明白了 ///////////////////////////
        ///////////////////// 参考地址 https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D ///////////////////////
        ///////////////////////////////////////////// 希望这篇文章能帮助到那些做新手引导的人 //////////////////////////////////////////////
        /////////////////////////////////////////////////// 正所谓师傅领进门修行在个人 ///////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        var browserWidth = Laya.Browser.width;
        var browserHeight = Laya.Browser.height;
        var pixelRatio = Laya.Browser.pixelRatio;
        console.log(browserWidth + " " + browserHeight + " " + pixelRatio); 
        // 获取canvas元素对应的DOM对象
        var canvas = document.getElementById('canvas');
        var div1 = document.getElementById('div1'); 
        // 获取在canvas上绘图的CanvasRenderingContext2D对象
        var ctx = canvas.getContext('2d'); 
        var image = new Image();
        // image.crossOrigin = "";
        image.src = "res/atlas/pixel.png";
        image.onload = function()
        {
            // 界面上按钮所在的位置以及按钮的宽高
            drawImage(image, 462, 194, 156, 48, 0); // 调用绘图以及 挖洞
        } 
        /**
         * 挖洞方法
         * @parame image 需要绘制的图像
         * @parame x 矩形窟窿的 x 位置
         * @parame y 矩形窟窿的 y 位置
         * @parame tw 矩形窟窿的 宽度
         * @parame th 矩形窟窿的 高度
         * @parame alpha 矩形窟窿的 alpha 透明值 0 到 1
         */
        var drawImage = function(image, x, y, tw, th, alpha)
        { 
            let wPercentage = browserWidth / pixelRatio / image.width;
            let hPercentage = browserHeight / pixelRatio / image.height; 
            let phoneW = 0;
            let phoneH = 0;
            
            if((image.width*hPercentage*pixelRatio) > browserWidth)
            {
                phoneW = Math.round(browserWidth / pixelRatio);
                phoneH = Math.round(image.height * wPercentage);
                console.log(phoneW + " | " + phoneH);
            }
            else if((image.height*wPercentage*pixelRatio) > browserHeight)
            {
                phoneW = Math.round(image.width * hPercentage);
                phoneH = Math.round(browserHeight / pixelRatio);
                console.log(phoneW + " || " + phoneH);
            }
            else
            {
                phoneW = browserWidth / pixelRatio;
                phoneH = browserHeight / pixelRatio;
            } 
            canvas.width = phoneW;
            canvas.height = phoneH; 
            div1.style.width = phoneW;
            div1.style.height = phoneH; 
            console.log(phoneW + " " + phoneH); 
            ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, phoneW, phoneH); 
            x = Math.round(x * (phoneW / image.width));
            y = Math.round(y * (phoneH / image.height));
            tw = Math.round(tw * (phoneW / image.width));
            th = Math.round(th * (phoneH / image.height)); 
            console.log(x + " " + y + " " + tw + " " + th); 
            // 获取从x、y开始，宽为 phoneW 高为 phoneH 的图片数据
            // 因为图片被 drawImage 该方法重新绘制以后 宽高发生了改变 所以获取的不是 image.width 和 image.height 而是经过计算的 phoneW 和 phoneH
            let imgData = ctx.getImageData(0, 0, phoneW, phoneH);
            let starI = (phoneW*(y-1)+x)*4;
            let endI = (phoneW*(y+th-1)+x+tw)*4;
            let row = y-1;
            let columnStart = 0;
            let columnEnd = 0;
            let i = 0;
            for (i=starI; i<=endI ; i+=4)
            {
                columnStart = (phoneW*row+x)*4;
                columnEnd = (phoneW*row+x+tw)*4;
                if( (i >= columnStart) && (i <= columnEnd) )
                {
                    // 改变每个像素的透明度
                    imgData.data[i + 3] = imgData.data[i + 3] * alpha;
                    if(i == columnEnd)
                    {
                        console.log(columnStart + " " + columnEnd);
                        row += 1;
                    }
                }
            }
            // 将获取的图片数据塞回去。
            ctx.putImageData(imgData, 0, 0);
        }
    </script>

请点击该图片放大之后获取该图片的尺寸是 1080 x 1920 的，如果你直接右键另存为的话不是原来的图片尺寸！