原生JavaScript实现刮刮乐
本文实例为大家分享了JavaScript实现刮刮乐的具体代码，供大家参考，具体内容如下
原理
鼠标按住移动的时候，实现刮刮乐的效果，那就是鼠标按下的同时鼠标移动，那就清除画布。松开鼠标，鼠标移动不再清除画布了，那就得清除事件。
canvas画布
1、获取画布元素
var canvas = document.getElementById('canvas');
2、获取绘图对象getContext
var ctx = canvas.getContext('2d');
3、画线
ctx.lineWidth = 3;//线宽 ctx.strokeStyle = 'red';//线条颜色 //开始的位置 moveTo(x,y); //结束的位置lineTo(x,y) //执行stroke()
4、矩形ctx.rect(x,y,width,height);
ctx.rect(0,0,300,150); ctx.fillStyle = '#ccc';//填充的颜色 ctx.fill();//执行 ctx.clearRect(e.clientX,e.clientY,20,20);//清除矩形
页面
1、页面结构
<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas> <div class="prize">谢谢惠顾</div>
2、样式
.prize {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
margin-top:-150px;
color: red;
font-size: 20px;
}
3、动画
//获取画布元素
var canvas = document.getElementById('canvas');
// 获取绘图对象
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;//线宽
ctx.strokeStyle = 'red';//线条颜色
//开始的位置 moveTo(x,y);
//结束的位置lineTo(x,y)
//执行stroke()
//矩形
ctx.rect(0,0,300,150);
ctx.fillStyle = '#ccc';//填充的颜色
ctx.fill();//执行
ctx.clearRect(e.clientX,e.clientY,20,20);
// 按下
canvas.onmousedown = function (e){
//移动
canvas.onmousemove = function (e) {
// ctx.lineTo(e.clientX,e.clientY);
// ctx.lineTo(100,100)
// ctx.stroke();
ctx.clearRect(e.clientX,e.clientY,20,20);//清除
}
}
canvas.onmouseup = function (e) {
canvas.onmousemove = null;
}
// 改变中奖信息
var arr = ['一个亿','现金500','100元话费','腾讯视频VIP月卡','谢谢惠顾'],
prize = document.querySelector('.prize'),
random = Math.floor(Math.random()*arr.length);
prize.innerText = arr[random];
完整源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*----------js刮刮乐------------*/
.prize {
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
margin-top:-150px;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!--js刮刮乐-->
<canvas id="canvas" width="300" height="150" style="border: 1px solid #ccc;"></canvas>
<div class="prize">谢谢惠顾</div>
<script>
// ------------js刮刮乐-----------
//获取画布元素
var canvas = document.getElementById('canvas');
// 获取绘图对象
var ctx = canvas.getContext('2d');
ctx.lineWidth = 3;//线宽
ctx.strokeStyle = 'red';//线条颜色
//开始的位置 moveTo(x,y);
//结束的位置lineTo(x,y)
//执行stroke()
//矩形
ctx.rect(0,0,300,150);
ctx.fillStyle = '#ccc';//填充的颜色
ctx.fill();//执行
ctx.clearRect(e.clientX,e.clientY,20,20);
// 按下
canvas.onmousedown = function (e){
//移动
canvas.onmousemove = function (e) {
// ctx.lineTo(e.clientX,e.clientY);
// ctx.lineTo(100,100)
// ctx.stroke();
ctx.clearRect(e.clientX,e.clientY,20,20);//清除
}
}
canvas.onmouseup = function (e) {
canvas.onmousemove = null;
}
// 改变中奖信息
var arr = ['一个亿','现金500','100元话费','腾讯视频VIP月卡','谢谢惠顾'],
prize = document.querySelector('.prize'),
random = Math.floor(Math.random()*arr.length);
prize.innerText = arr[random];
// ------------js刮刮乐-----------
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
20行JS代码实现网页刮刮乐效果
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&
-
javascript+canvas实现刮刮卡抽奖效果
运用canvas做的简单刮刮卡效果,每次刷新可重新测试 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
本文实例讲述了jQuery使用eraser.js插件实现擦除.刮刮卡效果的方法.分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小. 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作.插件正常运行在Safari,Chrome OS X和Windows,Android
-
移动端刮刮乐的实现方式（js+HTML5）
程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐
-
js+canvas实现刮刮奖功能
本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下 1.实现了PC端的刮刮奖效果 2.使用了canvas的文本,像素操作,合成,绘制图形,随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { mar
-
手机端js和html5刮刮卡效果
H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
-
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g
-
js HTML5手机刮刮乐代码
手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view
-
原生JavaScript实现刮刮乐
本文实例为大家分享了JavaScript实现刮刮乐的具体代码,供大家参考,具体内容如下 原理 鼠标按住移动的时候,实现刮刮乐的效果,那就是鼠标按下的同时鼠标移动,那就清除画布.松开鼠标,鼠标移动不再清除画布了,那就得清除事件. canvas画布 1.获取画布元素 var canvas = document.getElementById('canvas'); 2.获取绘图对象getContext var ctx = canvas.getContext('2d'); 3.画线 ctx.lineWid
-
JavaScript实现刮刮乐效果
刮刮乐怎么做? 本文实例为大家分享了JavaScript实现刮刮乐效果的具体代码,供大家参考,具体内容如下 来这我教你 1.首先准备好编程软件webStorm或者eclipse都行 2.不会编写代码?给你准备好了 3.如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <
-
HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)
刮刮乐想必大家都玩过,小时候兜里一有钱,就喊上小伙伴兴冲冲的跑去家旁边的小卖部,用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱,满眼期待的刮着买来的刮刮乐,心里早已想好中了100块钱大钞要去买好多好多辣条.卡片.陀螺.奥迪双钻的悠悠球- 认认真真看完本文,你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦!(当然如果你没有女朋友的话,也可以用你珍藏多年的美女图片哦!) ⛳️使用HTML.CSS和JavaS实现刮刮卡/刮刮乐 ♥️别着急,先看演示
-
JavaScript canvas实现刮刮乐案例
本文实例为大家分享了JavaScript canvas实现刮刮乐效果的具体代码,供大家参考,具体内容如下 效果图 HTML代码: <div class="ggk"> <span id="span">200元</span> <canvas id="canvas"></canvas> </div> css代码: .ggk { width: 200px; height: 100px
-
Android实现刮刮乐示例分析
微信公众号有很多都做刮刮乐的活动,本文就实现了刮刮乐的效果,具体代码如下: 首先要做一个类似橡皮擦的东西吧,然后才能把纸上的笔迹擦除 /** * FileName: SplashActivity.java * * @desc 橡皮擦功能,类似刮刮乐效果 * @author HTP * @Date 20140311 * @version 1.00 */ public class Text_Rubbler extends TextView { private float TOUCH_TOLERANC
-
Android studio实现刮刮乐的方法
本文实例为大家分享了Android studio实现刮刮乐的具体代码,供大家参考,具体内容如下 MainActivity public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mai