canvas制作刮刮卡

最新推荐文章于 2021-07-27 18:19:29 发布

愿你依旧

最新推荐文章于 2021-07-27 18:19:29 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/weixin_45777732/article/details/118892050

版权

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#ggk {
				width: 400px;
				height: 100px;
				position: relative;
			}

			#gk .nr {
				width: 400px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 30px;
				text-align: center;
				line-height: 100px;
			}

			#gk #canvas {
				width: 400px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="gk">
			<div class="nr">谢谢会顾</div>
			<canvas id="canvas" width="400" height="100"></canvas>
		</div>
	</body>
	<script type="text/javascript">
		let canvas = document.querySelector('#canvas')
		let ggkDom = document.querySelector('#gk')

		let ctx = canvas.getContext('2d')

		ctx.fillStyle = 'darkgray'
		ctx.fillRect(0, 0, 400, 100)
		ctx.font = "20px 微软雅黑"
		ctx.fillStyle = '#FFF'
		ctx.fillText('刮刮卡', 180, 50)
		// 设置isDraw= true，即为允许绘制
		var isGua = false;
		canvas.onmousedown = function() {
			isGua = true
		}
		// 开始移动时候绘制刮奖面积圆形，将原图像内的目标内容给清除掉
		canvas.onmousemove = function(e) {
			
			if (isGua) {
				let x=e.pageX-ggkDom.offsetLeft;
				let y = e.pageY - ggkDom.offsetTop
				ctx.globalCompositeOperation = 'destination-out'
				ctx.arc(x, y, 20, 0, 2 * Math.PI)
				ctx.fill()
			}
		}

		canvas.onmouseup = function() {
			isGua = false

		}
	</script>
</html>