zoukankan      html  css  js  c++  java
  • H5 刮图-刮一刮


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    *{margin:0;padding:0}

    </style>
    </head>
    <body>
    <canvas/>
    <script>
    (function(bodyStyle) {
    bodyStyle.mozUserSelect = 'none';
    bodyStyle.webkitUserSelect = 'none';

    var img = new Image();
    var canvas = document.querySelector('canvas');
    canvas.style.backgroundColor='transparent';
    canvas.style.position = 'absolute';

    img.addEventListener('load', function(e) {
    var ctx;
    img.width=window.innerWidth ;//2000;
    img.height=window.innerHeight;//2000;
    //img.width=document.documentElement.clientWidth;
    //img.height=document.documentElement.clientHeight;

    var w = img.width,
    h = img.height;
    var offsetX = canvas.offsetLeft,
    offsetY = canvas.offsetTop;
    var mousedown = false;

    function layer(ctx) {
    ctx.fillStyle = 'gray';
    ctx.fillRect(0, 0, w, h);
    }

    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,
    y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
    with(ctx) {
    beginPath()
    arc(x, y, 80, 0, Math.PI * 2);
    fill();
    }
    }
    }

    canvas.width=w;
    canvas.height=h;
    //canvas.style.backgroundImage='url('+img.src+')';
    canvas.style.background='url('+img.src+')';
    canvas.style.backgroundSize =''+ w+ 'px '+ h +'px';

    ctx=canvas.getContext('2d');
    ctx.fillStyle='transparent';
    ctx.fillRect(0, 0, w, h);
    layer(ctx);

    ctx.globalCompositeOperation = 'destination-out';

    canvas.addEventListener('touchstart', eventDown);
    canvas.addEventListener('touchend', eventUp);
    canvas.addEventListener('touchmove', eventMove);
    canvas.addEventListener('mousedown', eventDown);
    canvas.addEventListener('mouseup', eventUp);
    canvas.addEventListener('mousemove', eventMove);
    });
    img.src = 'Chrysanthemum.jpg';
    })(document.body.style);
    </script>
    </body>
    </html>

    -------demo 2-----------

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    *{margin:0;padding:0}
    
    </style>
    </head>
    <body>
    <div>
        <img id="bgImg" src="bar.jpg" style="position:absolute; left:0px; top:0px;" />
        <canvas id="CanvasDoodle"  imgsrc='Chrysanthemum.jpg' style='position:absolute;left:0px; top:0px;background: transparent;'></canvas>
    </div>
    <script>
    
    
    
    function CanvasDoodle(canvas){
            this.canvas=canvas;
            this.ctx=canvas.getContext("2d");
            this.imgSrc=canvas.getAttribute("imgsrc");
    	    document.getElementById('CanvasDoodle').width=window.innerWidth;
    		document.getElementById('CanvasDoodle').height=window.innerHeight;//2000;
    		document.getElementById('bgImg').width=canvas.width;
    		document.getElementById('bgImg').height=canvas.height;
    		
            //this.width=canvas.width;
            //this.height=canvas.height;
            this.left=parseInt(canvas.style.left);
            this.top=parseInt(canvas.style.top);
            this.touchX=0;
            this.touchY=0;
            this.needDraw=false;
            this.init();
        }
    
        CanvasDoodle.prototype={
            init:function(){
                var _self=this;
    
                var img=new Image();
                img.onload=function(){
                    var pat=_self.ctx.createPattern(img,"no-repeat");
                    _self.ctx.strokeStyle=pat;
                    _self.ctx.lineCap="round";
                    _self.ctx.lineJoin="round";
                    _self.ctx.lineWidth="100";
                }
                img.src=this.imgSrc;
            this.canvas.addEventListener('mousedown',function(e){
                    e.preventDefault();
                    _self.needDraw=true;
                    
                    _self.ctx.beginPath();
                    _self.ctx.moveTo(e.clientX-_self.left,e.clientY-_self.top);
                },false);
    
            this.canvas.addEventListener('mousemove',function(e){
                e.preventDefault();
                if(_self.needDraw){
                    _self.ctx.lineTo(e.clientX-_self.left,e.clientY-_self.top);
                    _self.ctx.stroke();
                }
            },false);
    
                this.canvas.addEventListener('mouseup',function(e){
                    e.preventDefault();
                    _self.needDraw=false;
                });
    
            }
        };
    	
    	
    	  
    	
        new CanvasDoodle(document.getElementById('CanvasDoodle'));
    
    
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    hdu 1028 Ignatius and the Princess III (n的划分)
    CodeForces
    poj 3254 Corn Fields (状压DP入门)
    HYSBZ 1040 骑士 (基环外向树DP)
    PAT 1071 Speech Patterns (25)
    PAT 1077 Kuchiguse (20)
    PAT 1043 Is It a Binary Search Tree (25)
    PAT 1053 Path of Equal Weight (30)
    c++ 常用标准库
    常见数学问题
  • 原文地址:https://www.cnblogs.com/wgscd/p/11278083.html
Copyright © 2011-2022 走看看