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>