使用Canvas实现刮刮乐效果

作者: JannyHo | 来源:发表于2017-07-26 10:36 被阅读0次

使用Canvas实现刮刮乐效果
canvas 刮刮乐
canvas-实现刮刮乐效果
iOS开发刮刮乐效果的实现
canvas— —刮刮乐
canvas刮刮乐
H5学习
刮刮乐效果
刮刮乐效果
刮刮乐效果

image.png

<!-- test.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
    <body>
        <h1>adsfasdfasdf</h1>
        <div id="div" style="width:300px;height:90px;margin:200px;padding:0;">
        </div>
        <script src="/utils/scratchcard.js"></script>
        <script>
            var div = document.getElementById('div');
            div.ScratchCard('一等奖');
        </script>
    </body>
</html>

/**
  * scratchcard.js
  */
Element.prototype.ScratchCard = function(t){
    var s = this;
    if(!s.nodeType || s.nodeType !== 1 || !t || Object.prototype.toString.call(t) !== '[object String]') return;
    w = s.clientWidth;
    h = s.clientHeight;
    var bg = document.createElement('div'),
    canvas = document.createElement('canvas'),
    context = canvas.getContext("2d"),
    touched = false,
    page_x = 0,
    page_y = 0,
    begin = function(e){
        touched = true;
        page_x = e.pageX-s.offsetLeft;
        page_y = e.pageY-s.offsetTop;
    },
    move = function(e){
      e.preventDefault();
      if(touched){
            context.globalCompositeOperation="destination-out"
            context.beginPath();
            context.moveTo( page_x,page_y );
            var epx = e.pageX || e.touches[0].pageX,
                epy = e.pageY || e.touches[0].pageY;
            page_x = epx-s.offsetLeft;
            page_y = epy-s.offsetTop;
            context.lineTo( page_x,page_y );
            context.stroke();
            context.lineWidth = Math.floor(h / 4);
        }
    },
    end = function(e){
        touched = false;
    };
    s.style.position = 'relative';
    bg.innerText = t;
    bg.style.fontSize = Math.floor(w / (t.length + 4)) + 'px';
    bg.style.textAlign = 'center';
    bg.style.width = w + 'px';
    bg.style.height = h + 'px';
    bg.style.lineHeight = h + 'px';
    bg.style.background = 'lightblue';
    s.appendChild(bg);
    canvas.width = w;
    canvas.height = h;
    canvas.style.position = 'absolute';
    canvas.style.top = '0';
    s.appendChild(canvas);
    context.lineCap = "round";
    context.fillStyle="#ccc";
    context.fillRect(0,0,w,h);
    //手指放到屏幕上
    canvas.addEventListener('touchstart', begin);
    canvas.addEventListener('mousedown', begin);
    //手指开始移动
    canvas.addEventListener('touchmove', move);
    canvas.addEventListener('mousemove', move);
    //手指离开
    canvas.addEventListener('touchend', end);
    canvas.addEventListener('mouseup', end);
}