HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)javascript技巧

刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球…

认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！）

别着急，先看演示

使用HTML、CSS和JavaS实现刮刮乐

第①步：创建刮刮乐的基本结构

第②步：将图片平铺在canvas画布上（作为刮刮乐的底层！）

第③步：如何制作刮刮乐的覆盖膜

第④步：如何制作刮刮乐覆盖膜上的“请刮开”字样

第⑤步：使用JavaScript来激活刮刮乐

完工——现在你就可以使用这个你自己设计的刮刮乐了哦！

面向纯小白的使用教程：

刮刮乐

为此，首先，你必须创建一个HTML文件。

#c1{border:1pxsolidblue;}演示效果：

#c1{border:1pxsolidblue;}//第一步：匹配到canvas对象varc1=document.getElementById("c1");//第二步：获取canvas的上下文环境varctx1=c1.getContext("2d");//getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。//创建一个图片对象varimgs=newImage();//指定图片路径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决定裁剪图片左上到右下区域；后面四个坐标表示所画区域的左上右下坐标}演示效果：

#c1{border:1pxsolidblue;position:absolute;}#c2{border:1pxsolidred;}body{position:relative;}varc1=document.getElementById("c1");varc2=document.getElementById("c2");varctx1=c1.getContext("2d");varctx2=c2.getContext("2d");//绘制图片到底层canvas2varimgs=newImage();imgs.src='img/girl.jpg';imgs.onload=function(){ctx2.drawImage(this,0,0)}//涂层绘制到顶层(即覆盖膜)canvas1ctx1.fillStyle="lightgray";ctx1.fillRect(0,0,960,1440);演示效果：

有关于相对定位和绝对定位，简单扯几句（可以理解理解）：

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

//参数：正常字体/斜体字号微软雅黑/仿宋normal:正常字体/italic：斜体ctx1.font="normal80px仿宋";//字体轮廓颜色ctx1.strokeStyle="slateblue";//绘制文本(空心)参数：文本，左上角x坐标，左上角y坐标ctx1.strokeText("请刮开！",320,750);