客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐别着急，先看演示 使用HTML、CSS和JavaS实现刮刮乐 第①步：创建刮刮乐的基本结构 第②步：将图片平铺在canvas画布上（作为刮刮乐的底层！） 第③步：如何制作刮刮乐的覆盖膜 第④步：如何制作刮刮乐覆盖膜上的“请刮开”字样 第⑤步：使用 JavaScript 来激活刮刮乐 完工——现在你就可以使用这个你自己设计的刮刮乐了哦！ 面向纯小白的使用教程： ♥️别着急，先看演示刮刮乐
💎使用HTML、CSS和JavaS实现刮刮乐
为此，首先，你必须创建一个 HTML 文件。 🎉第①步：创建刮刮乐的基本结构关于本刮刮乐设计，本博主采用的是前端中目前很火的一大技术——canvas实现的！ 既然用到canvas，肯定就要简单介绍一下它——canvas使用 JavaScript 在网页上绘制图像。而绘制的画布区域是一个矩形区域，我们可以控制其中每一像素，以达到想画啥就画啥的效果。这也是本博主使用它的原因哦！ 如果你想深入学习canvas，可以看这篇文——《为了让师妹20分钟学会canvas，我熬夜苦肝本文外加一个小项目【❤️建议收藏❤️】》
<!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画布上（作为刮刮乐的底层！）
<!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>
演示效果： 🎃第③步：如何制作刮刮乐的覆盖膜
<!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标签设置了相对定位（这就是前端中常说的父相子绝！） 有关于相对定位和绝对定位，简单扯几句（可以理解理解）：
🎈第④步：如何制作刮刮乐覆盖膜上的“请刮开”字样只需加入下述JavaScript代码即可！
//参数：正常字体/斜体 字号 微软雅黑/仿宋 normal:正常字体/italic：斜体
ctx1.font = "normal 80px 仿宋";
//字体轮廓颜色
ctx1.strokeStyle = "slateblue";
//绘制文本(空心) 参数：文本，左上角x坐标，左上角y坐标
ctx1.strokeText("请刮开！",320,750);
演示效果： 👻第⑤步：使用 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;
}
💝完工——现在你就可以使用这个你自己设计的刮刮乐了哦！ 🏄面向纯小白的使用教程：
<!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刮刮乐内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论