javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > HTML+CSS+JavaScript刮刮乐

HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

作者:孤寒者

这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球…

认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!)

⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐

别着急,先看演示

使用HTML、CSS和JavaS实现刮刮乐

第①步:创建刮刮乐的基本结构

第②步:将图片平铺在canvas画布上(作为刮刮乐的底层!)

第③步:如何制作刮刮乐的覆盖膜

第④步:如何制作刮刮乐覆盖膜上的“请刮开”字样

第⑤步:使用 JavaScript 来激活刮刮乐

完工——现在你就可以使用这个你自己设计的刮刮乐了哦!

面向纯小白的使用教程:

♥️别着急,先看演示

刮刮乐

💎使用HTML、CSS和JavaS实现刮刮乐

为此,首先,你必须创建一个 HTML 文件。

🎉第①步:创建刮刮乐的基本结构

关于本刮刮乐设计,本博主采用的是前端中目前很火的一大技术——canvas实现的!   既然用到canvas,肯定就要简单介绍一下它——canvas使用 JavaScript 在网页上绘制图像。而绘制的画布区域是一个矩形区域,我们可以控制其中每一像素,以达到想画啥就画啥的效果。这也是本博主使用它的原因哦!   如果你想深入学习canvas,可以看这篇文——《为了让师妹20分钟学会canvas,我熬夜苦肝本文外加一个小项目【❤️建议收藏❤️】》

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刮刮乐</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
</html>

演示效果:

在这里插入图片描述

🎅第②步:将图片平铺在canvas画布上(作为刮刮乐的底层!)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刮刮乐</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		// 第一步:匹配到canvas对象
		var c1 = document.getElementById("c1");
		//第二步:获取canvas的上下文环境
		var ctx1 = c1.getContext("2d");		 //getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
		
		//创建一个图片对象
		var  imgs = new Image();
		//指定图片路径
		imgs.src = 'img/girl.jpg'
		
		// 注意:图片不能直接放canvas上,需要通过事件.onload加载,不然图片可能因为没有加载完成而未出现在画布
		imgs.onload = function(){
			// 参数:图片,起始x坐标,起始y坐标,后两个参数指定大小(建议尺寸的比例和原图比例匹配)
			// 后两个参数如果不指定,默认会按原图1:1绘制,显示不下的内容不再显示!
			ctx1.drawImage(this,0,0,960,1440)
			
			// 拓展使用:
			//jb.drawImage(this,200,200,300,300,0,0,1078,1881)
			// 200,200,300,300决定裁剪图片左上到右下区域;后面四个坐标表示所画区域的左上右下坐标
		}
			
	</script>
</html>

演示效果:

在这里插入图片描述

🎃第③步:如何制作刮刮乐的覆盖膜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刮刮乐</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
				position: absolute;
			}
			
			#c2{
				border: 1px solid red;
			}
			
			body{
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// 绘制图片到底层  canvas2
		var imgs = new Image();
		imgs.src = 'img/girl.jpg';
		imgs.onload = function(){
			ctx2.drawImage(this,0,0)
		}
		
		// 涂层绘制到顶层(即覆盖膜)  canvas1
		ctx1.fillStyle = "lightgray";
		ctx1.fillRect(0,0,960,1440);

	</script>
</html>

演示效果:

在这里插入图片描述

 需要注意的是:上述代码对平铺刮刮乐底层图片的canvas设置了绝对定位,同时对其父标签body标签设置了相对定位(这就是前端中常说的父相子绝!)

有关于相对定位和绝对定位,简单扯几句(可以理解理解):

🎈第④步:如何制作刮刮乐覆盖膜上的“请刮开”字样

只需加入下述JavaScript代码即可!

	//参数:正常字体/斜体  字号  微软雅黑/仿宋             normal:正常字体/italic:斜体
	ctx1.font = "normal 80px 仿宋";   
	//字体轮廓颜色
	ctx1.strokeStyle = "slateblue";	
	//绘制文本(空心)   参数:文本,左上角x坐标,左上角y坐标
	ctx1.strokeText("请刮开!",320,750);

演示效果:

在这里插入图片描述

👻第⑤步:使用 JavaScript 来激活刮刮乐

  插一句:本刮刮乐设计实现的是当你鼠标点击后,持续清除你鼠标移动位置处50px*50px区域的覆盖膜。当鼠标取消点击后不再清除!所以——首先监听canvas的鼠标点击事件,当捕获到鼠标点击事件后,再监听鼠标的移动事件,鼠标的移动事件中包含清除功能!当鼠标松开,则对应关闭清除功能!

// 监听canvas的onmousedown事件(即鼠标点击事件)
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){		//监听canvas的onmousemove事件(即鼠标移动事件)
			console.log(e);
			var w = 50;			// 清除区域的宽度
			var h = 50;			// 清除区域的高度
			var x = e.pageX-c1.offsetLeft - w/2;    // 清除区域的x位置
			var y = e.pageY-c1.offsetTop - h/2;		// 清除区域的y位置
			ctx1.clearRect(x,y,w,h);
		}
		}
		// 监听鼠标的onmouseup事件(即鼠标松开事件)
		c1.onmouseup = function(ev){
		// 取消onmousemove事件
		c1.onmousemove = null;
		}

💝完工——现在你就可以使用这个你自己设计的刮刮乐了哦! 🏄面向纯小白的使用教程:

  1. 环境准备:要啥环境,不需要环境!本设计纯前端实现,所以根本不需要任何环境——只需要你电脑上有个浏览器就好了(我可不信你电脑上连个自带的浏览器都没)!
  2. 创建一个项目文件夹,我命名为“刮刮乐”。
  3. 项目文件夹下创建一个“img”文件夹,并在其中放入你女朋友/珍藏已久的美女图片。
  4. 项目文件夹下创建一个“刮刮乐.txt”的文本文件,将下述代码拷贝进去。
  5. 重命名“刮刮乐.txt”文件名为“刮刮乐.html”。
  6. 双击即可运行!!!

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>刮刮乐</title>
		<style type="text/css">
			#c1{
				border: 1px solid blue;
				position: absolute;
			}
			
			#c2{
				border: 1px solid red;
			}
			
			body{
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<canvas id="c1" width="960" height="1440"></canvas>
		
		<canvas id="c2" width="960" height="1440"></canvas>
		
	</body>
	<script type="text/javascript">
		var c1 = document.getElementById("c1");
		var c2 = document.getElementById("c2");
		
		var ctx1 = c1.getContext("2d");
		var ctx2 = c2.getContext("2d");
		
		
		// 绘制图片到底层  canvas2
		var imgs = new Image();
		imgs.src = 'img/girl.jpg';
		imgs.onload = function(){
			ctx2.drawImage(this,0,0)
		}
		
		// 涂层绘制到顶层(即覆盖膜)  canvas1
		ctx1.fillStyle = "lightgray";
		ctx1.fillRect(0,0,960,1440);
		
		ctx1.font = "normal 80px 仿宋";   
		ctx1.strokeStyle = "slateblue";			
		ctx1.strokeText("请刮开!",320,750);
		
		// 监听canvas的onmousedown事件
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){
			console.log(e);
			var w = 50;			// 清除区域的宽度
			var h = 50;			// 清除区域的高度
			var x = e.pageX-c1.offsetLeft - w/2;    // 清除区域的x位置
			var y = e.pageY-c1.offsetTop - h/2;		// 清除区域的y位置
			ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = function(ev){
		// 取消onmousemove事件
		c1.onmousemove = null;
		}

	</script>
</html>

如果你从本文中学到了知识,喜欢它,那么我很荣幸。希望你可以将本文分享给你的小伙伴,点个赞&&收藏本文,并且,欢迎广大读者在评论区探讨技术,或是提出你们真诚的意见。

本文到此结束,很高兴遇见你——我是【孤寒者】,一个喜欢计算机的男孩子!🌹

到此这篇关于HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)的文章就介绍到这了,更多相关HTML+CSS+JavaScript刮刮乐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文