Canvas 画布实现简单的刮刮乐功能

最新推荐文章于 2020-09-21 11:12:23 发布

看起来很好吃Q

最新推荐文章于 2020-09-21 11:12:23 发布

阅读量176

点赞数

文章标签： html

本文链接：https://blog.csdn.net/huihuihaha222222/article/details/103391428

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#cvs{
			border: 1px solid palegreen;
			position: absolute;

		}
		#out{
			width: 200px;
			height: 100px;
			text-align: center;
			line-height: 100px;
			font-size: 30px;
			position: absolute;
		}
	</style>
	<body>
		<div id="out">奖项</div>
		 <canvas id="cvs" width="200" height="100"></canvas>  <!--画布 -->
	</body>
	<script type="text/javascript">
		var cvs=document.getElementById("cvs");
		var ctx=cvs.getContext("2d");
		var arr=["汽车一辆",'现金1筐',"洗衣液一袋","谢谢惠顾","泡泡机"];
		var i=Math.floor(Math.random()*arr.length)  //随机数据
		document.getElementById("out").innerHTML=arr[i];
		
		ctx.beginPath();//开始绘画
		ctx.fillStyle="#eee" //填充颜色
		ctx.fillRect(0,0,200,100)
		ctx.closePath()  //关闭
		
		cvs.onmousedown=function(){
			document.onmousemove=function(e){
				var x=e.clientX-cvs.offsetLeft;  //获取鼠标位置
				var y=e.clientY-cvs.offsetTop;
				ctx.clearRect(x,y,20,20)
			}
			document.onmouseup=function(){
				document.onmousedown=null;
				document.onmousemove=null
			}
		}
		
		
	</script>
</html>

效果如下：
在这里插入图片描述

看起来很好吃Q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 画布实现简单的刮刮乐功能

代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #cvs{ border: 1px solid palegreen...
复制链接

扫一扫