腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

更新時間：2021年08月24日 17:15:33 作者：孤寒者

這篇文章主要介紹了HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會)本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

刮刮樂想必大家都玩過，小時候兜里一有錢，就喊上小伙伴興沖沖的跑去家旁邊的小賣部，用那稚嫩地小手遞給老板那被捏的皺巴巴的五毛錢，滿眼期待的刮著買來的刮刮樂，心里早已想好中了100塊錢大鈔要去買好多好多辣條、卡片、陀螺、奧迪雙鉆的悠悠球…

認(rèn)認(rèn)真真看完本文，你就可以用你女朋友的美照實現(xiàn)一個獨屬于你的刮刮樂哦?。ó?dāng)然如果你沒有女朋友的話，也可以用你珍藏多年的美女圖片哦?。?/p>

⛳️使用HTML、CSS和JavaS實現(xiàn)刮刮卡/刮刮樂

別著急，先看演示

使用HTML、CSS和JavaS實現(xiàn)刮刮樂

第①步：創(chuàng)建刮刮樂的基本結(jié)構(gòu)

第②步：將圖片平鋪在canvas畫布上（作為刮刮樂的底層?。?/p>

第③步：如何制作刮刮樂的覆蓋膜

第④步：如何制作刮刮樂覆蓋膜上的“請刮開”字樣

第⑤步：使用 JavaScript 來激活刮刮樂

完工——現(xiàn)在你就可以使用這個你自己設(shè)計的刮刮樂了哦！

面向純小白的使用教程：

♥️別著急，先看演示

刮刮樂

🎯🎯正如你在上面視頻中所看到的，這里我借助 HTML、CSS 和 JavaScript 實現(xiàn)了一個刮刮樂。🎯🎯
👑👑眾所周知，刮刮樂分為兩層，上面一層是可以直接刮掉的覆蓋膜，當(dāng)你把覆蓋膜刮掉之后，刮刮樂的廬山真面目才會現(xiàn)身，你才會真正知道你中沒中大獎！👑👑

💎使用HTML、CSS和JavaS實現(xiàn)刮刮樂

希望你會喜歡這個設(shè)計。我在下面分享了有關(guān)我如何進行此設(shè)計的詳細(xì)教程，并且附帶整個設(shè)計的完整代碼。
你大可直接復(fù)制粘貼使用。但是——授之以魚不如授之以漁，所以希望小伙伴們能跟著我的節(jié)奏來，一點點的學(xué)習(xí)整個設(shè)計的各個步驟，相信看到最后，小伙伴們都能自己獨立設(shè)計出獨屬于你們自己的刮刮樂哦！

為此，首先，你必須創(chuàng)建一個 HTML 文件。

🎉第①步：創(chuàng)建刮刮樂的基本結(jié)構(gòu)

關(guān)于本刮刮樂設(shè)計，本博主采用的是前端中目前很火的一大技術(shù)——canvas實現(xiàn)的！既然用到canvas，肯定就要簡單介紹一下它——canvas使用 JavaScript 在網(wǎng)頁上繪制圖像。而繪制的畫布區(qū)域是一個矩形區(qū)域，我們可以控制其中每一像素，以達到想畫啥就畫啥的效果。這也是本博主使用它的原因哦！ 如果你想深入學(xué)習(xí)canvas，可以看這篇文——《為了讓師妹20分鐘學(xué)會canvas，我熬夜苦肝本文外加一個小項目【❤️建議收藏❤️】》

這段 HTML 代碼就通過canvas繪制了本刮刮樂的基本結(jié)構(gòu)。我使用了一些 CSS 代碼來使此canvas畫布區(qū)域顯示出來（這個區(qū)域也就是后面制作刮刮樂的區(qū)域）。
需要注意的是——關(guān)于此canvas的width和height屬性（即寬和高）要根據(jù)你的圖片的大小來設(shè)定，不然后面會出現(xiàn)只顯示部分圖片的問題！

<!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畫布上（作為刮刮樂的底層?。?/h2>

因為canvas是使用 JavaScript 在網(wǎng)頁上繪制圖像的，所以關(guān)于對刮刮樂區(qū)域（即canvas畫布區(qū)域）的一切操作我們都在JavaScript中進行（雖然都說前端中JavaScript最難，但是下面所有的JavaScript，我都在代碼中給了詳細(xì)的注釋，如果你了解基本的JavaScript，相信你肯定會理解的?。?。
注意：此時HTML中使用了圖片，所以需要在此HTML文件同級目錄下創(chuàng)建一個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的上下文環(huán)境
		var ctx1 = c1.getContext("2d");		 //getContext("2d") 對象是內(nèi)建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
		
		//創(chuàng)建一個圖片對象
		var  imgs = new Image();
		//指定圖片路徑
		imgs.src = 'img/girl.jpg'
		
		// 注意：圖片不能直接放canvas上，需要通過事件.onload加載，不然圖片可能因為沒有加載完成而未出現(xiàn)在畫布
		imgs.onload = function(){
			// 參數(shù)：圖片，起始x坐標(biāo)，起始y坐標(biāo)，后兩個參數(shù)指定大?。ńㄗh尺寸的比例和原圖比例匹配）
			// 后兩個參數(shù)如果不指定，默認(rèn)會按原圖1:1繪制，顯示不下的內(nèi)容不再顯示!
			ctx1.drawImage(this,0,0,960,1440)
			
			// 拓展使用：
			//jb.drawImage(this,200,200,300,300,0,0,1078,1881)
			// 200,200,300,300決定裁剪圖片左上到右下區(qū)域；后面四個坐標(biāo)表示所畫區(qū)域的左上右下坐標(biāo)
		}
			
	</script>
</html>

演示效果：

在這里插入圖片描述

🎃第③步：如何制作刮刮樂的覆蓋膜

關(guān)于刮刮樂的覆蓋膜，本博主是通過又創(chuàng)建一個canvas畫布，并將其覆蓋在平鋪圖片的那一層canvas的正上方來實現(xiàn)——這也符合刮刮樂的特點不是么！

<!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設(shè)置了絕對定位，同時對其父標(biāo)簽body標(biāo)簽設(shè)置了相對定位（這就是前端中常說的父相子絕?。?/p>

有關(guān)于相對定位和絕對定位，簡單扯幾句（可以理解理解）：

position:relative——相對定位; position:absolute——絕對定位；
一般相對是放在父div里，絕對是放在子div里；
絕對定位是浮動的一個層，如果把上面那個父div的position:relative;給刪了，那么子div的position:absolute; 就會走位，走位，蛇皮走位！
所以用到絕對定位，那么父div里面必須要有相對定位，這樣防止絕對定位層走位?。?！

🎈第④步：如何制作刮刮樂覆蓋膜上的“請刮開”字樣

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

	//參數(shù)：正常字體/斜體  字號  微軟雅黑/仿宋             normal:正常字體/italic：斜體
	ctx1.font = "normal 80px 仿宋";   
	//字體輪廓顏色
	ctx1.strokeStyle = "slateblue";	
	//繪制文本(空心)   參數(shù)：文本，左上角x坐標(biāo)，左上角y坐標(biāo)
	ctx1.strokeText("請刮開！",320,750);

演示效果：

在這里插入圖片描述

👻第⑤步：使用 JavaScript 來激活刮刮樂

上面我們設(shè)計了整個刮刮樂，但這個刮刮樂還沒有任何可操作功能。這意味著這個刮刮樂它不能刮！刮都不能刮，那還叫什么刮刮樂?。。?！。為此，我們需要使用 JavaScript 監(jiān)聽鼠標(biāo)事件來激活刮刮樂。
使用下面的 JavaScript，我已經(jīng)在代碼中給了詳細(xì)的注釋。如果你了解基本的 JavaScript，你肯定會理解它。

插一句：本刮刮樂設(shè)計實現(xiàn)的是當(dāng)你鼠標(biāo)點擊后，持續(xù)清除你鼠標(biāo)移動位置處50px*50px區(qū)域的覆蓋膜。當(dāng)鼠標(biāo)取消點擊后不再清除！所以——首先監(jiān)聽canvas的鼠標(biāo)點擊事件，當(dāng)捕獲到鼠標(biāo)點擊事件后，再監(jiān)聽鼠標(biāo)的移動事件，鼠標(biāo)的移動事件中包含清除功能！當(dāng)鼠標(biāo)松開，則對應(yīng)關(guān)閉清除功能！

// 監(jiān)聽canvas的onmousedown事件（即鼠標(biāo)點擊事件）
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){		//監(jiān)聽canvas的onmousemove事件（即鼠標(biāo)移動事件）
			console.log(e);
			var w = 50;			// 清除區(qū)域的寬度
			var h = 50;			// 清除區(qū)域的高度
			var x = e.pageX-c1.offsetLeft - w/2;    // 清除區(qū)域的x位置
			var y = e.pageY-c1.offsetTop - h/2;		// 清除區(qū)域的y位置
			ctx1.clearRect(x,y,w,h);
		}
		}
		// 監(jiān)聽鼠標(biāo)的onmouseup事件（即鼠標(biāo)松開事件）
		c1.onmouseup = function(ev){
		// 取消onmousemove事件
		c1.onmousemove = null;
		}

💝完工——現(xiàn)在你就可以使用這個你自己設(shè)計的刮刮樂了哦！ 🏄面向純小白的使用教程：

環(huán)境準(zhǔn)備：要啥環(huán)境，不需要環(huán)境！本設(shè)計純前端實現(xiàn)，所以根本不需要任何環(huán)境——只需要你電腦上有個瀏覽器就好了（我可不信你電腦上連個自帶的瀏覽器都沒）！
創(chuàng)建一個項目文件夾，我命名為“刮刮樂”。
項目文件夾下創(chuàng)建一個“img”文件夾，并在其中放入你女朋友/珍藏已久的美女圖片。
項目文件夾下創(chuàng)建一個“刮刮樂.txt”的文本文件，將下述代碼拷貝進去。
重命名“刮刮樂.txt”文件名為“刮刮樂.html”。
雙擊即可運行?。。?/li>

在這里插入圖片描述

<!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);
		
		// 監(jiān)聽canvas的onmousedown事件
		c1.onmousedown = function(ev){
		c1.onmousemove = function(e){
			console.log(e);
			var w = 50;			// 清除區(qū)域的寬度
			var h = 50;			// 清除區(qū)域的高度
			var x = e.pageX-c1.offsetLeft - w/2;    // 清除區(qū)域的x位置
			var y = e.pageY-c1.offsetTop - h/2;		// 清除區(qū)域的y位置
			ctx1.clearRect(x,y,w,h);
		}
		}
		c1.onmouseup = function(ev){
		// 取消onmousemove事件
		c1.onmousemove = null;
		}

	</script>
</html>

如果你從本文中學(xué)到了知識，喜歡它，那么我很榮幸。希望你可以將本文分享給你的小伙伴，點個贊&&收藏本文，并且，歡迎廣大讀者在評論區(qū)探討技術(shù)，或是提出你們真誠的意見。

本文到此結(jié)束，很高興遇見你——我是【孤寒者】，一個喜歡計算機的男孩子！🌹

到此這篇關(guān)于HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會)的文章就介紹到這了,更多相關(guān)HTML+CSS+JavaScript刮刮樂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: