HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會(huì))
刮刮樂想必大家都玩過，小時(shí)候兜里一有錢，就喊上小伙伴興沖沖的跑去家旁邊的小賣部，用那稚嫩地小手遞給老板那被捏的皺巴巴的五毛錢，滿眼期待的刮著買來的刮刮樂，心里早已想好中了100塊錢大鈔要去買好多好多辣條、卡片、陀螺、奧迪雙鉆的悠悠球…
認(rèn)認(rèn)真真看完本文，你就可以用你女朋友的美照實(shí)現(xiàn)一個(gè)獨(dú)屬于你的刮刮樂哦?。ó?dāng)然如果你沒有女朋友的話，也可以用你珍藏多年的美女圖片哦?。?/p>
⛳️使用HTML、CSS和JavaS實(shí)現(xiàn)刮刮卡/刮刮樂
別著急，先看演示
使用HTML、CSS和JavaS實(shí)現(xiàn)刮刮樂
第①步：創(chuàng)建刮刮樂的基本結(jié)構(gòu)
第②步：將圖片平鋪在canvas畫布上（作為刮刮樂的底層?。?/p>
第③步：如何制作刮刮樂的覆蓋膜
第④步：如何制作刮刮樂覆蓋膜上的“請(qǐng)刮開”字樣
第⑤步：使用 JavaScript 來激活刮刮樂
完工——現(xiàn)在你就可以使用這個(gè)你自己設(shè)計(jì)的刮刮樂了哦！
面向純小白的使用教程：
♥️別著急，先看演示
刮刮樂
- 🎯🎯正如你在上面視頻中所看到的，這里我借助 HTML、CSS 和 JavaScript 實(shí)現(xiàn)了一個(gè)刮刮樂。🎯🎯
- 👑👑眾所周知，刮刮樂分為兩層，上面一層是可以直接刮掉的覆蓋膜，當(dāng)你把覆蓋膜刮掉之后，刮刮樂的廬山真面目才會(huì)現(xiàn)身，你才會(huì)真正知道你中沒中大獎(jiǎng)！👑👑
💎使用HTML、CSS和JavaS實(shí)現(xiàn)刮刮樂
- 希望你會(huì)喜歡這個(gè)設(shè)計(jì)。我在下面分享了有關(guān)我如何進(jìn)行此設(shè)計(jì)的詳細(xì)教程，并且附帶整個(gè)設(shè)計(jì)的完整代碼。
- 你大可直接復(fù)制粘貼使用。但是——授之以魚不如授之以漁，所以希望小伙伴們能跟著我的節(jié)奏來，一點(diǎn)點(diǎn)的學(xué)習(xí)整個(gè)設(shè)計(jì)的各個(gè)步驟，相信看到最后，小伙伴們都能自己獨(dú)立設(shè)計(jì)出獨(dú)屬于你們自己的刮刮樂哦！
為此，首先，你必須創(chuàng)建一個(gè) HTML 文件。
🎉第①步：創(chuàng)建刮刮樂的基本結(jié)構(gòu)
關(guān)于本刮刮樂設(shè)計(jì)，本博主采用的是前端中目前很火的一大技術(shù)——canvas實(shí)現(xiàn)的！ 既然用到canvas，肯定就要簡(jiǎn)單介紹一下它——canvas使用 JavaScript 在網(wǎng)頁上繪制圖像。而繪制的畫布區(qū)域是一個(gè)矩形區(qū)域，我們可以控制其中每一像素，以達(dá)到想畫啥就畫啥的效果。這也是本博主使用它的原因哦！ 如果你想深入學(xué)習(xí)canvas，可以看這篇文——《為了讓師妹20分鐘學(xué)會(huì)canvas，我熬夜苦肝本文外加一個(gè)小項(xiàng)目【❤️建議收藏❤️】》
- 這段 HTML 代碼就通過canvas繪制了本刮刮樂的基本結(jié)構(gòu)。我使用了一些 CSS 代碼來使此canvas畫布區(qū)域顯示出來（這個(gè)區(qū)域也就是后面制作刮刮樂的區(qū)域）。
- 需要注意的是——關(guān)于此canvas的width和height屬性（即寬和高）要根據(jù)你的圖片的大小來設(shè)定，不然后面會(huì)出現(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>
- 因?yàn)閏anvas是使用 JavaScript 在網(wǎng)頁上繪制圖像的，所以關(guān)于對(duì)刮刮樂區(qū)域（即canvas畫布區(qū)域）的一切操作我們都在JavaScript中進(jìn)行（雖然都說前端中JavaScript最難，但是下面所有的JavaScript，我都在代碼中給了詳細(xì)的注釋，如果你了解基本的JavaScript，相信你肯定會(huì)理解的?。?。
- 注意：此時(shí)HTML中使用了圖片，所以需要在此HTML文件同級(jí)目錄下創(chuàng)建一個(gè)img文件夾，并將你的圖片放進(jì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>
<script type="text/javascript">
// 第一步：匹配到canvas對(duì)象
var c1 = document.getElementById("c1");
//第二步：獲取canvas的上下文環(huán)境
var ctx1 = c1.getContext("2d"); //getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
//創(chuàng)建一個(gè)圖片對(duì)象
var imgs = new Image();
//指定圖片路徑
imgs.src = 'img/girl.jpg'
// 注意：圖片不能直接放canvas上，需要通過事件.onload加載，不然圖片可能因?yàn)闆]有加載完成而未出現(xiàn)在畫布
imgs.onload = function(){
// 參數(shù)：圖片，起始x坐標(biāo)，起始y坐標(biāo)，后兩個(gè)參數(shù)指定大小（建議尺寸的比例和原圖比例匹配）
// 后兩個(gè)參數(shù)如果不指定，默認(rèn)會(huì)按原圖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ū)域；后面四個(gè)坐標(biāo)表示所畫區(qū)域的左上右下坐標(biāo)
}
</script>
</html>
<!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對(duì)象
var c1 = document.getElementById("c1");
//第二步：獲取canvas的上下文環(huán)境
var ctx1 = c1.getContext("2d"); //getContext("2d") 對(duì)象是內(nèi)建的 HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
//創(chuàng)建一個(gè)圖片對(duì)象
var imgs = new Image();
//指定圖片路徑
imgs.src = 'img/girl.jpg'
// 注意：圖片不能直接放canvas上，需要通過事件.onload加載，不然圖片可能因?yàn)闆]有加載完成而未出現(xiàn)在畫布
imgs.onload = function(){
// 參數(shù)：圖片，起始x坐標(biāo)，起始y坐標(biāo)，后兩個(gè)參數(shù)指定大小（建議尺寸的比例和原圖比例匹配）
// 后兩個(gè)參數(shù)如果不指定，默認(rèn)會(huì)按原圖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ū)域；后面四個(gè)坐標(biāo)表示所畫區(qū)域的左上右下坐標(biāo)
}
</script>
</html>
演示效果：
🎃第③步：如何制作刮刮樂的覆蓋膜
- 關(guān)于刮刮樂的覆蓋膜，本博主是通過又創(chuàng)建一個(gè)canvas畫布，并將其覆蓋在平鋪圖片的那一層canvas的正上方來實(shí)現(xiàn)——這也符合刮刮樂的特點(diǎ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>
演示效果：
需要注意的是：上述代碼對(duì)平鋪刮刮樂底層圖片的canvas設(shè)置了絕對(duì)定位，同時(shí)對(duì)其父標(biāo)簽body標(biāo)簽設(shè)置了相對(duì)定位（這就是前端中常說的父相子絕?。?/p>
有關(guān)于相對(duì)定位和絕對(duì)定位，簡(jiǎn)單扯幾句（可以理解理解）：
- position:relative——相對(duì)定位; position:absolute——絕對(duì)定位；
- 一般相對(duì)是放在父div里，絕對(duì)是放在子div里；
- 絕對(duì)定位是浮動(dòng)的一個(gè)層，如果把上面那個(gè)父div的position:relative;給刪了，那么子div的position:absolute; 就會(huì)走位，走位，蛇皮走位！
- 所以用到絕對(duì)定位，那么父div里面必須要有相對(duì)定位，這樣防止絕對(duì)定位層走位?。?！
🎈第④步：如何制作刮刮樂覆蓋膜上的“請(qǐng)刮開”字樣
只需加入下述JavaScript代碼即可！
//參數(shù)：正常字體/斜體 字號(hào) 微軟雅黑/仿宋 normal:正常字體/italic：斜體
ctx1.font = "normal 80px 仿宋";
//字體輪廓顏色
ctx1.strokeStyle = "slateblue";
//繪制文本(空心) 參數(shù)：文本，左上角x坐標(biāo)，左上角y坐標(biāo)
ctx1.strokeText("請(qǐng)刮開！",320,750);
演示效果：
👻第⑤步：使用 JavaScript 來激活刮刮樂
- 上面我們?cè)O(shè)計(jì)了整個(gè)刮刮樂，但這個(gè)刮刮樂還沒有任何可操作功能。這意味著這個(gè)刮刮樂它不能刮！刮都不能刮，那還叫什么刮刮樂?。。。?。為此，我們需要使用 JavaScript 監(jiān)聽鼠標(biāo)事件來激活刮刮樂。
- 使用下面的 JavaScript，我已經(jīng)在代碼中給了詳細(xì)的注釋。如果你了解基本的 JavaScript，你肯定會(huì)理解它。
插一句：本刮刮樂設(shè)計(jì)實(shí)現(xiàn)的是當(dāng)你鼠標(biāo)點(diǎn)擊后，持續(xù)清除你鼠標(biāo)移動(dòng)位置處50px*50px區(qū)域的覆蓋膜。當(dāng)鼠標(biāo)取消點(diǎn)擊后不再清除！所以——首先監(jiān)聽canvas的鼠標(biāo)點(diǎn)擊事件，當(dāng)捕獲到鼠標(biāo)點(diǎn)擊事件后，再監(jiān)聽鼠標(biāo)的移動(dòng)事件，鼠標(biāo)的移動(dòng)事件中包含清除功能！當(dāng)鼠標(biāo)松開，則對(duì)應(yīng)關(guān)閉清除功能！
// 監(jiān)聽canvas的onmousedown事件（即鼠標(biāo)點(diǎn)擊事件）
c1.onmousedown = function(ev){
c1.onmousemove = function(e){ //監(jiān)聽canvas的onmousemove事件（即鼠標(biāo)移動(dòng)事件）
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)在你就可以使用這個(gè)你自己設(shè)計(jì)的刮刮樂了哦！ 🏄面向純小白的使用教程：
- 環(huán)境準(zhǔn)備：要啥環(huán)境，不需要環(huán)境！本設(shè)計(jì)純前端實(shí)現(xiàn)，所以根本不需要任何環(huán)境——只需要你電腦上有個(gè)瀏覽器就好了（我可不信你電腦上連個(gè)自帶的瀏覽器都沒）！
- 創(chuàng)建一個(gè)項(xiàng)目文件夾，我命名為“刮刮樂”。
- 項(xiàng)目文件夾下創(chuàng)建一個(gè)“img”文件夾，并在其中放入你女朋友/珍藏已久的美女圖片。
- 項(xiàng)目文件夾下創(chuàng)建一個(gè)“刮刮樂.txt”的文本文件，將下述代碼拷貝進(jìn)去。
- 重命名“刮刮樂.txt”文件名為“刮刮樂.html”。
- 雙擊即可運(yù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);
ctx1.font = "normal 80px 仿宋";
ctx1.strokeStyle = "slateblue";
ctx1.strokeText("請(qǐng)刮開！",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é)到了知識(shí)，喜歡它，那么我很榮幸。希望你可以將本文分享給你的小伙伴，點(diǎn)個(gè)贊&&收藏本文，并且，歡迎廣大讀者在評(píng)論區(qū)探討技術(shù)，或是提出你們真誠的意見。
本文到此結(jié)束，很高興遇見你——我是【孤寒者】，一個(gè)喜歡計(jì)算機(jī)的男孩子！🌹
到此這篇關(guān)于HTML+CSS+JavaScript做女朋友版的刮刮樂(一看就會(huì))的文章就介紹到這了,更多相關(guān)HTML+CSS+JavaScript刮刮樂內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- html加css樣式實(shí)現(xiàn)js美食項(xiàng)目首頁示例代碼
- JavaScript中html畫布的使用與頁面存儲(chǔ)技術(shù)詳解
- JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁面
- SpringMVC @RequestBody Date類型的Json轉(zhuǎn)換方式
- C#通過HttpWebRequest發(fā)送帶有JSON Body的POST請(qǐng)求實(shí)現(xiàn)
- 解決@RequestBody接收json對(duì)象報(bào)錯(cuò)415的問題
- 聊聊@RequestBody和Json之間的關(guān)系
- 在js中修改html body的樣式
相關(guān)文章
這篇文章主要介紹了js帶縮略圖的圖片輪播效果，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。2015-09-09
JavaScript樹形組件實(shí)現(xiàn)無限級(jí)樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實(shí)現(xiàn)無限級(jí)樹形結(jié)構(gòu)，一種構(gòu)建多級(jí)有序樹形結(jié)構(gòu)JSON（或XML）數(shù)據(jù)源的方法，下面更多相關(guān)資料需要的小伙伴可以參考一下2022-03-03
利用Query+bootstrap和js兩種方式實(shí)現(xiàn)日期選擇器
日期選擇器在我們平時(shí)開發(fā)的時(shí)候經(jīng)常要用到，下面這篇文章主要給大家介紹了利用Query+bootstrap和js這兩種方式實(shí)現(xiàn)日期選擇器的方法,文中兩種方法都給出了詳細(xì)的示例代碼，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-01-01
全面了解javascript中的錯(cuò)誤處理機(jī)制
下面小編就為大家?guī)硪黄媪私鈐avascript中的錯(cuò)誤處理機(jī)制。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JavaScript 提升運(yùn)行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說法，有四種代碼 會(huì)拖慢腳本的運(yùn)行，并最終導(dǎo)致腳本失控。分別是次數(shù)過多的同步循環(huán)、龐大的函數(shù)體、不恰當(dāng)?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08
JavaScript垃圾回收機(jī)制原理總結(jié)深入探究
就像人類會(huì)產(chǎn)生垃圾一樣，程序運(yùn)行過程中也會(huì)產(chǎn)生垃圾，如果不及時(shí)回收輕則將會(huì)拖慢程序運(yùn)行，重則會(huì)導(dǎo)致系統(tǒng)崩潰，也就是所謂的內(nèi)存泄漏。所以垃圾回收非常必要2022-10-10
談?wù)凧avaScript數(shù)組常用方法總結(jié)
本篇文章主要介紹了談?wù)凧avaScript數(shù)組常用方法總結(jié)，在JavaScript中，我們需要時(shí)常對(duì)數(shù)組進(jìn)行操作。一起跟隨小編過來看看吧2017-01-01
JavaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫avaScript trim 實(shí)現(xiàn)去除字符串首尾指定字符的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
用js將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例
下面小編就為大家?guī)硪黄胘s將long型數(shù)據(jù)轉(zhuǎn)換成date型或datetime型的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07