新手导航用的canvas蒙层

使用Canvas蒙层的目的是为了：在蒙层中抠出一个透明区域。

<html>

<head>

</head>

<body style="margin:0;background-color: #3A639C">

dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <span class="mark">aa</span> dfvsdfgfdgdfs


dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasd fdfdsfasdfadfdfsdfasd fdfdsfasdfadfdfsdfasdfdfdsfasdfad fdfsdfasdfdfdsfasdfadfdfs dfasdfdfdsfasdfadfdfsdfasdf <span class="mark">aa</span> dfvsdfgfdgdfs


dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <br>
dfdsfasdfadfdfsdfasdf <span class="mark" >aa</span> dfvsdfgfdgdfs



</body>

<canvas id="canvasOne" ></canvas>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #canvasOne{
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
  }
  html {
    width: 100vw;
    height: 100vh;
  }

  body {
    background: url("https://farm3.staticflickr.com/2908/32764885503_1a04915b11_k.jpg") no-repeat center;
    width: 100vw;
    min-height: 100%;
  }

</style>
<script>




    function draw(circle) {
        var canvas = document.getElementById('canvasOne');
        var ctx = canvas.getContext('2d');
        var w = canvas.width = window.innerWidth;
        var h = canvas.height = window.innerHeight;

        ctx.clearRect(0, 0, w, h);
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="rgba(0,0,0,0.6)";
        ctx.fillRect(0, 0, w, h);
        ctx.fill();
        ctx.save();

        let marks = document.getElementsByClassName('mark');

        let circleSize = 100;

        for (let i = 0; i < marks.length; i++) {
            const cyElement = marks[i];
            const e = cyElement.getBoundingClientRect();
            const ax = e.x - 50;
            const ay = e.y - 20;
            ctx.beginPath();
            ctx.clearRect(ax,ay,circleSize,circleSize);
            ctx.drawImage(circle,0,0,300,300,ax,ay,circleSize,circleSize);
            ctx.restore();
        }
    }


    let circle = new Image();
    circle.src = './aaaa.png';
    circle.onload = function(){
        setInterval(function () {
            draw(circle);
        },30);
    }



</script>
</body>

</html>
posted on 2020-11-03 20:53 袜子破了阅读(489) 评论(0) 编辑收藏举报