jquery实现擦除效果

来源：互联网发布：08-09年nba总决赛数据编辑：程序博客网时间：2024/05/21 10:45
效果展示：
代码实现：
    <!DOCTYPE html>      <html>      <head>      <meta charset="UTF-8">      <title>刮刮卡</title>      <!-- 新 Bootstrap 核心 CSS 文件 -->      <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">      <!-- 可选的Bootstrap主题文件（一般不用引入） -->      <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">      </head>      <body>          <div class="container">              <canvas id="myCanvas_bottom" style="border:1px solid #d3d3d3;position: absolute;">              Your browser does not support the HTML5 canvas tag.              </canvas>              <canvas id="myCanvas_top" style="border:1px solid #d3d3d3;position: absolute;">              Your browser does not support the HTML5 canvas tag.              </canvas>          </div>          <script type="text/javascript">              var w = 800;              var h = 80;                            var mousedown = false;                    //设置底部canvas样式等              var canvas_bottom = document.getElementById('myCanvas_bottom');              canvas_bottom.width = w;              canvas_bottom.height = h;              canvas_bottom_ctx = canvas_bottom.getContext('2d');              canvas_bottom_ctx.font = '30px Verdana';              canvas_bottom_ctx.textAlign = 'left';              var gradient = canvas_bottom_ctx.createLinearGradient(0, 0, canvas_bottom.width, 0);              gradient.addColorStop(0, 'magenta');              gradient.addColorStop(0.5, 'blue');              gradient.addColorStop(1, 'red');              canvas_bottom_ctx.strokeStyle = gradient;              canvas_bottom_ctx.strokeText('谢谢惠顾，感谢您这次的选择', 10, 50); //可自由设定                    //设置顶部canvas              var canvas_top = document.getElementById('myCanvas_top');              canvas_top.width = w;              canvas_top.height = h;              var offsetX = canvas_top.offsetLeft;              var offsetY = canvas_top.offsetTop;              canvas_top_ctx = canvas_top.getContext('2d');              canvas_top_ctx.fillStyle = 'gray';              canvas_top_ctx.fillRect(0, 0, w, h);                    canvas_top_ctx.globalCompositeOperation = 'destination-out';                    canvas_top.addEventListener('touchstart', eventDown);              canvas_top.addEventListener('touchend', eventUp);              canvas_top.addEventListener('touchmove', eventMove);              canvas_top.addEventListener('mousedown', eventDown);              canvas_top.addEventListener('mouseup', eventUp);              canvas_top.addEventListener('mousemove', eventMove);                    function eventDown(e){                  e.preventDefault();                  mousedown=true;              }                    function eventUp(e){                  e.preventDefault();                  mousedown=false;              }                    function eventMove(e){                  e.preventDefault();                  if(mousedown) {                       if(e.changedTouches){                           e=e.changedTouches[e.changedTouches.length-1];                       }                       var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0;                       var y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;                       with(canvas_top_ctx) {                           beginPath()                           arc(x, y, 10, 0, Math.PI * 2);                           fill();                       }                  }              }          </script>      </body>      </html>
0 0