???? 作者主页：​​Java李杨勇 ​​

???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

???? 欢迎点赞 ???? 收藏 ⭐留言 ????   

效果演示： 文末获取源码

代码目录： 

主要代码实现：

CSS样式：

* {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 320px;
            height: 410px;
            background: url("img/gao1.jpg") no-repeat;
            background-size: 100% 100%;
            position: relative;
            /*margin: 0 auto;*/
        }

        #myCanvas {
            position: absolute;
            left: 0;
            top: 0;
        }

javascript代码 :

<script type="text/javascript">
    var myCanvas = document.getElementById("myCanvas");
    var can = myCanvas.getContext("2d");
    var X = myCanvas.width;
    var Y = myCanvas.height;
    var oImg = new Image();
    oImg.src = "img/gao4.jpeg";
    oImg.onload = function() {
        can.beginPath();
        can.drawImage(oImg, 0, 0, X, Y);
        can.closePath();
    }
    var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
    var startEvtName = device ? "touchstart" : "mousedown";
    var moveEvtName = device ? "touchmove" : "mousemove";
    var endEvtName = device ? "touchend" : "mouseup";

    function draw(event) {
        var x = device ? event.touches[0].clientX : event.clientX;
        var y = device ? event.touches[0].clientY : event.clientY;
        //console.log(x,y);
        can.beginPath();
        can.globalCompositeOperation = "destination-out";
        can.arc(x, y, 20, 0, Math.PI * 2, false);
        can.fill();
        can.closePath();
    }
    //true  捕获 false  冒泡
    myCanvas.addEventListener(startEvtName, function() {
        myCanvas.addEventListener(moveEvtName, draw, false);
    }, false);
    myCanvas.addEventListener(endEvtName, function() {
        myCanvas.removeEventListener(moveEvtName, draw, false);
    }, false);
</script>

上面的图片大家引入自己喜欢的就行 

源码获取

打卡 文章 更新 50  /  100天