使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】_刮刮乐网页制作(2)

2401_84976104

于 2024-05-16 02:23:34 发布

阅读量732

点赞数 27

文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976104/article/details/138932661

版权

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

注意：此时HTML中使用了图片，所以需要在此HTML文件同级目录下创建一个img文件夹，并将你的图片放进去！

<!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>

演示效果：
在这里插入图片描述

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

关于刮刮乐的覆盖膜，本博主是通过又创建一个canvas画布，并将其覆盖在平铺图片的那一层canvas的正上方来实现——这也符合刮刮乐的特点不是么！

<!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标签设置了相对定位（这就是前端中常说的父相子绝！）

有关于相对定位和绝对定位，简单扯几句（可以理解理解）：

position:relative——相对定位; position:absolute——绝对定位；
一般相对是放在父div里，绝对是放在子div里；
绝对定位是浮动的一个层，如果把上面那个父div的position:relative;给删了，那么子div的position:absolute; 就会走位，走位，蛇皮走位！
所以用到绝对定位，那么父div里面必须要有相对定位，这样防止绝对定位层走位！！！

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

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

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

演示效果：
在这里插入图片描述

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

上面我们设计了整个刮刮乐，但这个刮刮乐还没有任何可操作功能。这意味着这个刮刮乐它不能刮！刮都不能刮，那还叫什么刮刮乐啊！！！。为此，我们需要使用 JavaScript 监听鼠标事件来激活刮刮乐。
使用下面的 JavaScript，我已经在代码中给了详细的注释。如果你了解基本的 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;
		}

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

🏄面向纯小白的使用教程：

环境准备：要啥环境，不需要环境！本设计纯前端实现，所以根本不需要任何环境——只需要你电脑上有个浏览器就好了（我可不信你电脑上连个自带的浏览器都没）！
创建一个项目文件夹，我命名为“刮刮乐”。
项目文件夹下创建一个“img”文件夹，并在其中放入你女朋友/珍藏已久的美女图片。
项目文件夹下创建一个“刮刮乐.txt”的文本文件，将下述代码拷贝进去。
重命名“刮刮乐.txt”文件名为“刮刮乐.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);
 
 ctx1.font = "normal 80px 仿宋"; 
 ctx1.strokeStyle = "slateblue"; 


![img](https://img-blog.csdnimg.cn/img_convert/740e1c1602c7eec46596cb901805144e.png)
![img](https://img-blog.csdnimg.cn/img_convert/7b19495f4d4e93a5d9115a6c8503c4d3.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

转存中...(img-jW350xuM-1715797393206)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84976104

关注

27
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】_刮刮乐网页制作(2)

需要注意的是：上述代码对平铺刮刮乐底层图片的canvas设置了绝对定位，同时对其父标签body标签设置了相对定位（这就是前端中常说的父相子绝！插一句：本刮刮乐设计实现的是当你鼠标点击后，持续清除你鼠标移动位置处50px*50px区域的覆盖膜。当鼠标取消点击后不再清除！所以——首先监听canvas的鼠标点击事件，当捕获到鼠标点击事件后，再监听鼠标的移动事件，鼠标的移动事件中包含清除功能！只需加入下述JavaScript代码即可！当鼠标松开，则对应关闭清除功能！
复制链接

扫一扫