canvas简易刮奖

最新推荐文章于 2024-06-02 00:26:11 发布

miracle_mf

最新推荐文章于 2024-06-02 00:26:11 发布

阅读量318

点赞数

分类专栏： canvas

本文链接：https://blog.youkuaiyun.com/mf_9_5_2_7/article/details/80904764

版权

canvas 专栏收录该内容

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简易画布抽奖</title>
		<style type="text/css">
			/*两个元素都定位,画布在上面*/
			#con{
				width: 300px;
				height: 150px;
				position: absolute;
				text-align: center;
				line-height: 150px;
				font-size: 24px;
				
			}
			#cvs{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="con">ssss</div>
		<canvas id="cvs" width="300" height="150"></canvas>
		
	</body>
	<script type="text/javascript">
		var con=document.getElementById("con");
		var cvs=document.getElementById("cvs");
		var ctx=cvs.getContext("2d");
		//创建一个数组，里面写入各种奖项
		var arr=["一等奖","二等奖","三等奖","鼓励奖","特等大奖","谢谢惠顾"];
		var i=Math.floor(Math.random()*arr.length);
		con.innerHTML=arr[i];
		
		//画布上色 把奖项盖住
		ctx.beginPath();
		ctx.fillStyle="#CCCCCC";
		ctx.fillRect(0,0,300,150);
		ctx.closePath();
		
		cvs.οnmοusedοwn=function(){
			document.οnmοusemοve=function(e){
				ctx.clearRect(e.clientX-cvs.offsetLeft,e.clientY-cvs.offsetTop,10,10)
				
			}
			document.οnmοuseup=function(){
				document.οnmοusedοwn=null;
				document.οnmοusemοve=null
			}
		}
		
	</script>
</html>