HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會)
阿新 • • 發佈：2021-08-25
刮刮樂想必大家都玩過，小時候兜裡一有錢，就喊上小夥伴興沖沖的跑去家旁邊的小賣部，用那稚嫩地小手遞給老闆那被捏的皺巴巴的五毛錢，滿眼期待的颳著買來的刮刮樂，心裡早已想好中了100塊錢大鈔要去買好多好多辣條、卡片、陀螺、奧迪雙鑽的悠悠球…
認認真真看完本文，你就可以用你女朋友的美照實現一個獨屬於你的刮刮樂哦！（當然如果你沒有女朋友的話，也可以用你珍藏多年的美女圖片哦！）
⛳️使用HTML、和S實現刮刮卡/刮刮樂
彆著急，先看演示
使用HTML、CSS和JavaS實現刮刮樂
第①步：建立刮刮樂的基本結構
第②步：將圖片平鋪在canvas畫布上（作為刮刮樂的底層！）
第③步：如何製作刮刮樂的覆蓋膜
第④步：如何製作刮刮樂覆蓋膜上的“請刮開”字樣
第⑤步：使用 來啟用刮刮樂
完工——現在你就可以使用這個你自己設計的刮刮樂了哦！
面向純小白的使用教程：
♥️彆著急，先看演示
刮刮樂
- 🎯🎯正如你在上面視訊中所看到的，這裡我藉助 HTML、CSS 和 JavaScript 實現了一個刮刮樂。🎯🎯
- 👑👑眾所周知，刮刮樂分為兩層，上面一層是可以直接刮掉的覆蓋膜，當你把覆蓋膜刮掉之後，刮刮樂的廬山真面目才會現身，你才會真正知道你中沒中大獎！👑👑
💎使用HTML、CSS和JavaS實現刮刮樂
- 希望你會喜歡這個設計。我在下面分享了有關我如何進行此設計的詳細教程，並且附帶整個設計的完整程式碼。
- 你大可直接複製貼上使用。但是——授之以魚不如授之以漁，所以希望小夥伴們能跟著我的節奏來，一點點的學習整個設計的各個步驟，相信看到最後，小夥伴們都能自己獨立設計出獨屬於你們自己的刮刮樂哦！
為此，首先，你必須建立一個 HTML 檔案。
🎉第①步：建立刮刮樂的基本結構
關於本刮刮樂設計，本博主採用的是前端中目前很火的一大技術——canvas實現的！ 既然用到canvas，肯定就要簡單介www.cppcns.com
- 這段 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>
eiFhfew <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,960,1440)
// 拓展使用：
//jb.drawImage(this,200,300,1078,1881)
// 200,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)
}
// 塗層繪製到頂層(即覆蓋膜) canvas1
ctx1.fillStyle = "lightgray";
ctx1.fillRect(0,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.onmhttp://www.cppcns.comousemove = 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,1440);
ctx1.font = "normal 80px 仿宋";
ctx1.strokeStyle = "slateblue";
ctx1.strokeText("請刮開！",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,h);
}
}
c1.onmouseup = function(ev){
// 取消onmousemove事件
c1.onmousemove = null;
}
</script>
</html>
如果你從本文中學到了知識，喜歡它，那麼我很榮幸。希望你可以將本文分享給你的小夥伴，點個贊&&收藏本文，並且，歡迎廣大讀者在評論區探討技術，或是提出你們真誠的意見。
本文到此結束，很高興遇見你——我是【孤寒者】，一個喜歡計算機的男孩子！🌹
到此這篇關於HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會)的文章就介紹到這了,更多相關HTML+CSS+JavaScript刮刮樂內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！