canvas绘制刮刮卡

风舞红枫

已于 2022-03-19 14:57:03 修改

阅读量368

点赞数 4

分类专栏： canvas 文章标签： canvas

于 2021-03-05 09:29:53 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114383090

版权

canvas 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

无图不欢，先上图
请添加图片描述

<!DOCTYPE html>
<html>
<head>
	<meta name="keywords" content="风舞红枫,前端技术,canvas"/>
	<meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/>
	<meta charset="utf-8">
	<title>刮刮卡</title>
	<link rel="icon" href="../image/icon2.ico">
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;}
		body{overflow: hidden;}
		div{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:300px;height:150px;text-align:center;line-height:150px;background:rgb(200,0,0);color:rgb(255,255,255);font-size:22px;}
		canvas{display: block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;filter:blur(0.7px);}
	</style>
</head>
<body>
	<div></div>
	<canvas></canvas>
</body>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	var canvas = document.getElementsByTagName('canvas')[0];
	var context = canvas.getContext("2d");

	var Jackpots = ["一等奖","二等奖","三等奖","四等奖","奖励奖"];
	//一等奖概率2%	二等奖概率6%	三等奖概率14%	四等奖概率30%	奖励奖概率48%
	var Jackpot = rand(0,49);
	if(Jackpot == 0){
		div.innerHTML = Jackpots[0];
	}else if(Jackpot>0 && Jackpot<4){
		div.innerHTML = Jackpots[1];
	}else if(Jackpot>3 && Jackpot<11){
		div.innerHTML = Jackpots[2];
	}else if(Jackpot>10 && Jackpot<26){
		div.innerHTML = Jackpots[3];
	}else{
		div.innerHTML = Jackpots[4];
	}

	context.beginPath();
	context.fillStyle = "rgb(200,200,200)"
	context.moveTo(0,0);
	context.lineTo(300,0);
	context.lineTo(300,150);
	context.lineTo(0,150);
	context.lineTo(0,0);
	context.fill();
	context.closePath();

	context.beginPath();
	context.font = '30px Arial';
	context.fillStyle = "rgb(255,255,255)"
	context.fillText("刮刮卡", 110 , 90);
	context.fill();
	context.closePath();
	
	var fillColor = ["rgb(255,0,0,0.8)","rgb(255,255,0,0.8)","rgb(255,0,255,0.8)","rgb(0,255,255,0.8)"];
	for(var i = 0;i<50;i++){
		context.beginPath();
		context.fillStyle = fillColor[rand(0,3)];
		context.arc(rand(20,280),rand(20,130),1,0,2*Math.PI);
		context.fill();
		context.closePath();
	}

	var flag = false;
	canvas.onmousedown = function(){
		flag = true;
	}

	canvas.onmouseup = function(){
		flag = false;
	}

	canvas.onmousemove = function(){
		if(flag){
			var e = event || window.event;
			var x = e.clientX - parseInt(div.offsetLeft);
			var y = e.clientY - parseInt(div.offsetTop);
			//console.log(x,y);

			context.beginPath();
			context.arc(x,y,20,0,2*Math.PI);
			context.globalCompositeOperation="destination-out";
			context.fill();
			context.closePath();
		}
	}

	//随机n到m的一个整数
	function rand(n,m){
		var c = m - n + 1;
		return Math.floor(Math.random() * c + n);
	}
</script>
</html>