jquery实现擦除效果

最新推荐文章于 2021-05-30 19:01:15 发布

别动我的love

最新推荐文章于 2021-05-30 19:01:15 发布

阅读量505

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/starrykey/article/details/52214889

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示：

代码实现：

    <!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>