htmlでスクレーパ効果を実現
9745 ワード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{
margin: 0;
padding: 0;
} */
#cvs{
border: 1px solid red;
position: absolute;
z-index: 999;
}
#con{
width:200px ;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
position: absolute;
}
</style>
</head>
<body>
<canvas id="cvs" width="200" height="100"></canvas>
<div id="con"></div>
</body>
<script type="text/javascript">
var cvs=document.getElementById('cvs');
var con=document.getElementById("con")
var ctx=cvs.getContext('2d');
var arr=[
" ",
"iphone 11",
"mac pro",
" ",
" ",
" "
]
var index=Math.floor(Math.random()*arr.length)
con.innerHTML=arr[index]
ctx.beginPath();
ctx.rect(0,0,cvs.width,cvs.height);
ctx.fillStyle='#ccc';
ctx.fill();
ctx.closePath()
cvs.onmousedown=function(){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,20,20)
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null;
}
}
</script>
</html>