100-days-Coding - day12

day12-0827

html - 刮刮奖

start

painting

刮刮奖的整体思路，就是canvas的动态绘制「事件驱动」

使用两个canvas，下层为最终展示层「刮完后的涂层」，上层为「刮层，银色层」
每次移动手指时，绘制图形「原型，三角形，等」，特点是透明，可以使得下层显现

重点：

• 透明涂层绘画

this.ctx.globalCompositeOperation = "destination-out"; // 设置这句才可以绘制透明区域

• 绘制状态 - 绘制百分比

this.ctx.getImageData(0, 0, Width, Height); // rgba 计算alpha通道的占比即可

    
    
    
    
    
    




    
    

        

            

                917来啦！
            
        
    

    
    

        

            
        
    

    

        

            

                
确认领奖
            
        
    

    
    
    
    

注：使用的是luckycard - Github