canvas刮刮卡_canvas 自动刮卡-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42902260/article/details/111696787

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刮刮乐</title>
		<style type="text/css">
			#ggk{
				width: 600px;
				height: 200px;
				position: relative;
			}
			#ggk .jp{
				width: 600px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
				color: deeppink;
				font-size: 50px;
				line-height: 200px;
			}
			#ggk #canvas{
				width: 600px;
				height: 200px;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="ggk">
			<div id="jp" class="jp">谢谢惠顾</div>
			<canvas id="canvas" width="600" height="200"></canvas>
		</div>
		
		<script>
			var canvas=document.querySelector('#canvas')
			var ggkDom=document.querySelector("#ggk")
			var jpDom=document.querySelector("#jp")
			var ctx=canvas.getContext('2d')
			ctx.fillStyle="darkgray"
			ctx.fillRect(0,0,600,200)
			ctx.fillStyle="#fff"
			ctx.font="20px 微软雅黑"
			ctx.fillText("刮刮卡",260,100)
			var isDraw=false;
			canvas.onmousedown=function(){
				isDraw=true
			}
			canvas.onmouseover=function(e){
				if(isDraw){
				var x=e.pageX-ggkDom.offsetLeft;
				var y=e.pageY-ggkDom.offsetTop;
				ctx.globalCompositeOperation="destination-out"
				ctx.arc(x,y,20,0,2*Math.PI)
				ctx.fill()
				}
			}
			canvas.onmouseup=function(){
				isDraw=false
			}
			var arr=[{content:"一等奖：iphoneXs",p:0.1},{content:"二等奖：诺基亚",p:0.2},{content:"三等奖：娃娃",p:0.3}]
		    var randomnum=Math.random()
			if(randomnum<arr[0].p){
				jpDom.innerHTML=arr[0].content
			}else if(randomnum<arr[1].p+arr[0].p){
			jpDom.innerHTML=arr[1].content
		    }else if(randomnum<arr[2].p+arr[1].p+arr[0].p){
			jpDom.innerHTML=arr[2].content
		    }
		
		</script>
	</body>
</html>