20行JS代码实现网页刮刮乐效果


Posted in Javascript onJune 23, 2017

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码

效果如下

20行JS代码实现网页刮刮乐效果

盖伦.jpg

20行JS代码实现网页刮刮乐效果

刮刮乐.gif

HTML部分

<body>
  ![](img/gailun.jpg)
  <canvas id="canvas" width="400" height="300"></canvas>
 </body>

没什么要特别注意的

为了效果加了些CSS样式

CSS部分

<style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
   img{
    width: 400px;
    height: 300px;
    left: 200px;
    position: absolute;
    z-index: -1;
   }
   canvas{
    margin-left:200px;
   }
  </style>

注意

1.为了清除浏览器自带效果加了

*{
   margin: 0;
   padding: 0;
  }

2.img需要在灰布下面,加了z-index;

3.图片绝对定位

js部分

分析下逻辑

1.鼠标按下移动相应区域刮开

2.鼠标抬起改变鼠标位置不接着刮开

js代码

<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');
   //画蒙布
  context.beginPath();
  context.fillStyle= 'grey'
  context.fillRect(0,0,400,300);
  //鼠标按下开刮
  canvas.onmousedown=function(){
   canvas.onmousemove = function(){
    //获取鼠标坐标
    var x = event.clientX;
    var y = event.clientY;
    //destination-out    显示原来的不在后来区域的部分
    context.globalCompositeOperation = "destination-out";
    context.beginPath();
    context.arc(x-200,y,30,0,Math.PI*2);
    context.fill();  
   }
  }
  //鼠标抬起不刮开
  canvas.onmouseup=function(){
   canvas.onmousemove = function(){ 
   }
  } 
  </script>

需要注意的是

1.图片和画布左移了200px,所以圆的起点坐标相对于获取位置减了200px;

2.globalCompositeOperation是画布的一个功能作用是设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上,还有其余10种写法

以上这篇20行JS代码实现网页刮刮乐效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
canvas实现图像截取功能
Feb 06 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
javascript回调函数详解
Feb 06 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
理解JavaScript中的对象
Aug 25 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 #Javascript
微信小程序 获取二维码实例详解
Jun 23 #Javascript
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
angularJs的ng-class切换class
Jun 23 #Javascript
关于使用js算总价的问题
Jun 23 #Javascript
angular select 默认值设置方法
Jun 23 #Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 #Javascript
You might like
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Python魔术方法详解
2015/02/14 Python
python3处理含有中文的url方法
2018/05/10 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
python不同版本的_new_不同点总结
2020/12/09 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
社会实践自我鉴定
2013/11/07 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
校园招聘策划书
2014/01/09 职场文书
小学生秋游活动方案
2014/02/23 职场文书
2015年女生节活动总结
2015/02/27 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android