canvas-刮刮乐中大奖

canvas文档

 canvas的合成属性

合成其实就是常见的蒙板状态，本质就是如何进行压盖，如何进行显示

可以通过globalCompositeOperation来设置压盖顺序

比如我们此时画了一个方和一个圆，第一次画的是方，第二次画的是圆，所以会出现圆压盖方的现象

ctx.globalCompositeOperation = type;

默认-source-over

 

source-in

source-out

source-atop

destination-over

destination-in

destination-out

destination-atop

lighter

copy

xor

等等等.....查看文档吧你一一列举了

刮刮乐

     .box{
        width: 248px;  border: 1px solid #333;   text-align: center;
        line-height: 58px;  user-select: none;   color: #333;   
        position: relative;   font-size: 30px;  overflow: hidden;  margin: 150px auto;
    }
    canvas{
        position: absolute; eft: 0;  top: 0; display: block;
    }

    <div class="box">
        <canvas width="250" height="60"></canvas>
        特等奖
    </div>

    <script>
        var canvas= document.querySelector("canvas");
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "#333";
        ctx.fillRect(0,0,250,60);
        //设置新画上的元素 ，擦掉原有的元素   橡皮擦功能
        ctx.globalCompositeOperation="destination-out";
        //鼠标按下
        canvas.onmousedown = function(){
            //移动
            canvas.onmousemove = function(event){
                //画圆
                ctx.beginPath();
                ctx.arc(event.offsetX,event.offsetY,10,0,Math.PI * 2,false);
                ctx.fill();
            }
        }
    </script>