基于H5canvas刮刮乐界面

效果

老规矩线上效果图, 如下图


基于H5canvas刮刮乐界面_第1张图片
这里写图片描述

原理

主要基于canvas的图形组合 context.globalCompositeOperation这个函数.
图形组合就是两个图形相互叠加了图形的表现形式,是后画的覆盖掉先画的呢,还是相互重叠的部分不显示等等,至于怎么显示就取决于type的值了.
type:

    source-over(默认值):在原有图形上绘制新图形

    destination-over:在原有图形下绘制新图形

    source-in:显示原有图形和新图形的交集,新图形在上,所以颜色为新图形的颜色

    destination-in:显示原有图形和新图形的交集,原有图形在上,所以颜色为原有图形的颜色

    source-out:只显示新图形非交集部分

    destination-out:只显示原有图形非交集部分

    source-atop:显示原有图形和交集部分,新图形在上,所以交集部分的颜色为新图形的颜色

    destination-atop:显示新图形和交集部分,新图形在下,所以交集部分的颜色为原有图形的颜色

    lighter:原有图形和新图形都显示,交集部分做颜色叠加

    xor:重叠飞部分不现实

    copy:只显示新图形

type值效果图:


基于H5canvas刮刮乐界面_第2张图片
这里写图片描述

代码




    
    刮刮乐


    
    
    


你可能感兴趣的:(基于H5canvas刮刮乐界面)