[LayaAir 1.0]新手引导 挖洞 不用 cacheAs="bitmap" 希望能帮助那些和我一样有需求的码农！你好我好大家好才是真的好！请各位大佬批评指教！

在做新手引导挖洞的时候参考了Laya官方的教程 用到了 cacheAs="bitmap" 这个属性但是我相信很多人都遇到了 如果宽度或者高度超过 2048 的话 cacheAs 就会失败 导致蒙版消失不显示， 但是说实话 我做的时候已经很接近2048,，但是宽和高都没有超过 2048的时候，蒙版就已经消失了！ 我很郁闷，并且相信肯定还有人也是跟我一样有这样的需求所以我研究了一下 并分享出来如何 挖洞！不用cacheAs方法
<!-- 请把当前代码片段加入到 index.html body 标签中的最下面，图片路径请自行更改，用到的图片我也会放到附件 -->
<!-- 请用LayaAir IDE 自行创建窗口 并且放入一枚按钮，目前只对 矩形 挖洞 其他形状请参考我提供的 API 地址自行参考 -->
<!-- 用谷歌浏览器进行调试的时候 如果选择了开发工具里面的 手机设定 在切换的时候需要刷新页面 因为我没有加 stage resize 事件处理还请原谅 -->
<!-- div 和 canvas可以用JS动态创建这里为了便于参考 所以直接写了标签，div 和 canvas 的宽高在标签里没有指明因为需要计算之后动态更改 -->
    <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/ ... ext2D ///////////////////////
        ///////////////////////////////////////////// 希望这篇文章能帮助到那些做新手引导的人 //////////////////////////////////////////////
        /////////////////////////////////////////////////// 正所谓师傅领进门修行在个人 ///////////////////////////////////////////////////
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        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 的，如果你直接右键另存为的话不是原来的图片尺寸！