<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;
100%;
height: 100%;
top: 0;
}
html {
100vw;
height: 100vh;
}
body {
background: url("https://farm3.staticflickr.com/2908/32764885503_1a04915b11_k.jpg") no-repeat center;
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>