使用css和js实现刮刮乐（简单易懂还有趣）

使用了html5的新标签canvas,画布。

思想：在一个div里面写上奖项，定义一个数组，为奖池，再定义一个随机数，使奖项随机。然后整一个画布把div给盖住，然后给画布整一个鼠标按下事件，鼠标按下的时候来一个鼠标移动事件，鼠标移动的时候使画布小面积消失。鼠标抬起的时候让鼠标移动事件失效，一个简单的刮刮乐就实现了。上代码！！！

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style type="text/css">#cvs {position: absolute;}#out {width: 200px;height: 100px;text-align: center;line-height: 100px;font-size: 30px;position: absolute;}</style><body><div id="out">奖项</div><canvas id="cvs" width="200" height="100"></canvas><!--画布 --></body><script type="text/javascript">var cvs = document.getElementById("cvs");var ctx = cvs.getContext("2d");var arr = ["奔驰E300一辆", "300平米别墅一套", "洗衣液一袋", "谢谢惠顾", "食盐一袋"];//奖项池var i = Math.floor(Math.random() * arr.length); //随机数据document.getElementById("out").innerHTML = arr[i];ctx.beginPath(); //开始绘画ctx.fillStyle = "#eee"; //填充颜色ctx.fillRect(0, 0, 200, 100);//矩形左上角的 x 坐标。矩形左上角的 y 坐标。矩形的宽度，以像素计。矩形的高度，以像素计。ctx.closePath(); //关闭cvs.onmousedown = function() {document.onmousemove = function(e) {var x = e.clientX - cvs.offsetLeft; //获取鼠标位置var y = e.clientY - cvs.offsetTop;ctx.clearRect(x, y, 20, 20);//在给定矩形内清空一个矩形}document.onmouseup = function() {document.onmousedown = null;document.onmousemove = null;}}</script>
</html>

效果图：

使用css和js实现刮刮乐（简单易懂还有趣）相关推荐

会员注册与验证码demo 带注释（html、css、js）
0005 会员注册与验证码demo(html.css.js) 本文实现一个简单的会员注册页面,使用到html.css.js,运用FormGroup的各类型实现用户名.密码.邮箱.验证码.生日.年龄.图 ...
html css 和 js 如何协同工作的
html css 和 js 如何协同工作的一个简单的登录样式的demo 在html中通过 <link /> 标签引入对应的css文件,例如: <head><meta c ...
Canvas 实现刮刮乐 js实现刮刮乐
Canvas 实现刮刮乐 js实现刮刮乐 **思路: (1)首先需要一个盒子定位,确定刮刮乐区域想要放在哪里 (2)定位盒子里有个放内容的盒子,也就是放奖品的 (3)用一个画布(canvas)把上面的 ...
刮刮乐，前端代码html+js实现，直接运行
1,介绍刮刮乐实现,主要使用jquery.eraser.js实现擦除在线预览效果图如下: 2,代码 <!DOCTYPE html> <html><head> ...
完美实现刮刮乐抽奖（该有的都有），html+css+jquery实现
1.项目目录源码下载 static (静态文件) css (样式) font (字体) image (图片) js (脚本代码,刮刮卡效果,中奖处理) picture (图片) awards.htm ...
js 实现刮刮乐卡片效果
需要用到的知识点 1.canvas globalCompositeOperation : 设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上 ,这个属性是重点 2.canvas getIm ...
H5 Canvas刮刮乐
玩游戏的人很多时候都会遇到翻牌子开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了其实很多时候在你点开那个 ...
使用Canvas制作刮刮乐，看看你能刮出什么奖品来？
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言今天在一个彩票网站看到了一个刮刮乐的效果,觉得挺有意思的就打算来仿写一个,经过一番简单的思考大概就有了基本都想法.总体效果使用Can ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...

使用css和js实现刮刮乐（简单易懂还有趣）

使用css和js实现刮刮乐（简单易懂还有趣）相关推荐

最新文章

热门文章