制作loading页面所遇到的问题，求lufy大大帮忙

shidoudou

代码如下

1. /**
   
2. * Created by shidoudou on 2014/12/26.
   
3. */
   
4. function LoadingSample8(data,W,H,w,h,color){
   
5.     var self = this;
   
6.     base(self,LSprite,[]);
   
7.     self.progress = 0;
   
8.     self.step = 0;
   
9.     self.holeW = w || 22;
   
10.     self.holeH = h || 30;
    
11.     self.holeAmount = 10;
    
12.     self.holesx = 8;
    
13.     self.loadingBarWidth = self.holeW*self.holeAmount;
    
14.     self.loadingBarHeight = self.holeH;
    
15.     self.progressColor = color || "#f031f2";
    
16.     self.backLayer = new LSprite();
    
17. //    self.backLayer.graphics.add(function(){
    
18. //        var ctx = LGlobal.canvas;
    
19. //        var img = new Image();
    
20. //        img.onload = function(){
    
21. //            ctx.drawImage(img,0,0,W,H);
    
22. //        };
    
23. //        img.src = './img/loading.jpg';
    
24. //    });
    
25.     self.loader = new LLoader();
    
26.     self.loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    
27.     self.loader.load(data,"bitmapData");
    
28.     function loadBitmapdata(event){
    
29.         self.bitmapdata = new LBitmapData(self.loader.content);
    
30.         self.bitmap = new LBitmap(self.bitmapdata);
    
31.         self.bitmap.scaleX =  (W/LGlobal.width).toFixed(4);
    
32.         self.bitmap.scaleY = (H/LGlobal.height).toFixed(4);
    
33.         self.backLayer.addChild(self.bitmap);
    
34.     }
    
35.     self.addChild(self.backLayer);
    
36.     self.progressLayer = new LSprite();
    
37.     self.progressLayer.x = (LGlobal.width - self.loadingBarWidth)*0.5;
    
38.     self.progressLayer.y = (LGlobal.height - self.loadingBarHeight)*0.83;
    
39.     self.addChild(self.progressLayer);
    
40.     self.progressPrecentLayer = new LSprite();
    
41.     self.layersText = new LTextField();
    
42.     self.layersText.size = 22;
    
43.     self.layersText.weight = "bolder";
    
44.     self.layersText.color = "#ffffff";
    
45.     self.layersText.font = "Microsoft Yahei";
    
46.     self.progressPrecentLayer.addChild(self.layersText);
    
47.     self.progressPrecentLayer.x = (LGlobal.width - 45)*0.5;
    
48.     self.progressPrecentLayer.y = (LGlobal.height - self.progressPrecentLayer.getHeight())*0.87;
    
49.     self.addChild(self.progressPrecentLayer);
    
50.     self._addHole();
    
51. }
    
52. LoadingSample8.prototype._addHole = function(){
    
53.     var self = this;
    
54.     var amount=self.holeAmount,sx=self.holeW,w=self.holeW,h=self.holeH;
    
55.     var holeObjBg = new LSprite();
    
56.     holeObjBg.graphics.drawRoundRect(1,"#ffffff",[0,0,self.holeW*amount,self.holeH,14],true,"#390039");
    
57.     self.progressLayer.addChild(holeObjBg);
    
58.     for(var i=0; i<amount; i++){
    
59.         var grd = LGlobal.canvas.createLinearGradient(0,-h,0,h);
    
60.         grd.addColorStop(0,"white");
    
61.         grd.addColorStop(1,self.progressColor);
    
62.         var progressObj = new LSprite();
    
63.         progressObj.alpha = 0;
    
64.         progressObj.x = i*sx;
    
65.         progressObj.graphics.drawRect(0,"",[0,0,self.holeW,self.holeH],true,grd);
    
66.         self.progressLayer.addChild(progressObj);
    
67.         progressObj.blendMode = LBlendMode.SOURCE_ATOP;
    
68.     }
    
69. };
    
70. LoadingSample8.prototype.setProgress = function(value){
    
71.     var self = this;
    
72.     self.progress = value/100;
    
73.     if(Math.floor(self.progress/0.1) > self.step){
    
74.         var n = Math.ceil(self.progress/0.1);
    
75.         if(n > 10)n = 10;
    
76.         for(var i=0; i<n; i++){
    
77.             var sc = self.progressLayer.childList;
    
78.             if(sc[i].alpha > 0)continue;
    
79.             var o = self.progressLayer.childList[i];
    
80.             LTweenLite.to(o,1,{
    
81.                 alpha: 1.
    
82.             });
    
83.         }
    
84.         self.step ++;
    
85.         self.layersText.text = self.progress*100 + '%';
    
86.     }
    
87. };

复制代码

1.在67行，使用progressObj.blendMode = LBlendMode.SOURCE_ATOP;达不到预想的效果，如截图所示。
2.
var ctx = LGlobal.canvas;
var img = // base64的image数据流
ctx.drawImage(img,0,0,W,H);
  本想base64的image数据流画loading背景页面，但是发现很卡，图片大小9K左右。

lufy

1.在67行，使用progressObj.blendMode = LBlendMode.SOURCE_ATOP;达不到预想的效果，如截图所示。

canvas中这个效果是针对整个画面来起作用的，你的游戏中已经有背景了，所以已有图形已经变成了整个画面了，
建议使用mask来做

2.
var ctx = LGlobal.canvas;
var img = // base64的image数据流
ctx.drawImage(img,0,0,W,H);
  本想base64的image数据流画loading背景页面，但是发现很卡，图片大小9K左右。

如果是你注释掉的代码的话，你写的东西会导致时间轴上每一桢都进行图片的读取，然后再绘制。
能不能说明一下不使用LBitmapData的理由？