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

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

認認真真看完本文,你就可以用你女朋友的美照實現一個獨屬於你的刮刮樂哦!(當然如果你沒有女朋友的話,也可以用你珍藏多年的美女圖片哦!)

⛳️使用HTML、CSS和JavaS實現刮刮卡/刮刮樂

別著急,先看演示

使用HTML、CSS和JavaS實現刮刮樂

第①步:創建刮刮樂的基本結構

第②步:將圖片平鋪在canvas畫佈上(作為刮刮樂的底層!)

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

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

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

完工——現在你就可以使用這個你自己設計的刮刮樂瞭哦!

面向純小白的使用教程:

♥️別著急,先看演示

刮刮樂

  • 🎯🎯正如你在上面視頻中所看到的,這裡我借助 HTML、CSS 和 JavaScript 實現瞭一個刮刮樂。🎯🎯
  • 👑👑眾所周知,刮刮樂分為兩層,上面一層是可以直接刮掉的覆蓋膜,當你把覆蓋膜刮掉之後,刮刮樂的廬山真面目才會現身,你才會真正知道你中沒中大獎!👑👑

💎使用HTML、CSS和JavaS實現刮刮樂

  • 希望你會喜歡這個設計。我在下面分享瞭有關我如何進行此設計的詳細教程,並且附帶整個設計的完整代碼。
  • 你大可直接復制粘貼使用。但是——授之以魚不如授之以漁,所以希望小夥伴們能跟著我的節奏來,一點點的學習整個設計的各個步驟,相信看到最後,小夥伴們都能自己獨立設計出獨屬於你們自己的刮刮樂哦!

為此,首先,你必須創建一個 HTML 文件。

🎉第①步:創建刮刮樂的基本結構

關於本刮刮樂設計,本博主采用的是前端中目前很火的一大技術——canvas實現的!   既然用到canvas,肯定就要簡單介紹一下它——canvas使用 JavaScript 在網頁上繪制圖像。而繪制的畫佈區域是一個矩形區域,我們可以控制其中每一像素,以達到想畫啥就畫啥的效果。這也是本博主使用它的原因哦!   如果你想深入學習canvas,可以看這篇文——《為瞭讓師妹20分鐘學會canvas,我熬夜苦肝本文外加一個小項目【❤️建議收藏❤️】》

  • 這段 HTML 代碼就通過canvas繪制瞭本刮刮樂的基本結構。我使用瞭一些 CSS 代碼來使此canvas畫佈區域顯示出來(這個區域也就是後面制作刮刮樂的區域)。
  • 需要註意的是——關於此canvas的width和height屬性(即寬和高)要根據你的圖片的大小來設定,不然後面會出現隻顯示部分圖片的問題!
<!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畫佈上(作為刮刮樂的底層!)

  • 因為canvas是使用 JavaScript 在網頁上繪制圖像的,所以關於對刮刮樂區域(即canvas畫佈區域)的一切操作我們都在JavaScript中進行(雖然都說前端中JavaScript最難,但是下面所有的JavaScript,我都在代碼中給瞭詳細的註釋,如果你瞭解基本的JavaScript,相信你肯定會理解的!)。
  • 註意:此時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;
		}

💝完工——現在你就可以使用這個你自己設計的刮刮樂瞭哦! 🏄面向純小白的使用教程:

  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刮刮樂內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: